Как сделать фиксированное расстояние между слайдами в слайдере?
Всем привет. Помогите пожалуйста. У меня на сайте имеется слайдер из 8 слайдов с бесконечной прокруткой. По умолчанию на экране отображается 4 слайда, дальше с помощью кнопок справа можно переключать по одному слайду. Расстояние между слайдами всегда неизменно 20 пикселей. Мне нужно чтобы права граница моего слайдера совпадала с границей моих кнопок переключения. Пробовал разными способами, в одном из них на разрешении 1920 на 1080 все хорошо, но на 4К мониторах опять не совпадает. Помогите пожалуйста решить проблему. Скриншоты и куски кода приложил ниже. Спасибо заранее!
$(document).ready(function() {
$(".slider").slick({
arrows: true,
dots: false,
infinite: true,
speed: 500,
slidesToShow: 4,
prevArrow: ".project__buttons-prev",
nextArrow: ".project__buttons-next",
responsive: [{
breakpoint: 1600,
settings: {
arrows: false,
slidesToShow: 3,
},
},
{
breakpoint: 980,
settings: {
arrows: false,
slidesToShow: 3,
adaptiveHeight: true,
},
},
{
breakpoint: 850,
settings: {
arrows: false,
slidesToShow: 2,
},
},
{
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 1,
},
},
{
breakpoint: 375,
settings: {
arrows: false,
slidesToShow: 1,
adaptiveHeight: false,
},
},
],
});
});.projects {
height: 100vh;
height: 100svh;
max-width: 1560px;
display: flex;
flex-direction: column;
margin: 0 auto;
}
.projects__title {
font-size: 40px;
font-weight: var(--medium);
text-align: center;
padding-top: 65px;
padding-bottom: 70px;
}
.slider {
height: auto;
width: 100%;
max-width: 1560px;
}
.slider img {
height: auto;
}
.slide-desc {
max-width: 365px;
text-align: left;
}
.slick-slide {
margin-right: 20px;
}
.slide-desc h3,
p {
font-size: 24px;
}
.slide-desc h3 {
margin-top: 1.5rem;
}
.slide-desc p {
margin-top: 0.9rem;
}
.project__buttons {
display: flex;
flex-direction: row;
gap: 8px;
justify-content: right;
align-items: center;
margin: 30px 0 0 0;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<section class="projects" id="projects">
<h2 class="projects__title wow animate__animated animate__fadeInUp">Projects</h2>
<div class="slider wow animate__animated animate__fadeInLeft">
<div class="slider-wrapper">
<picture>
<img src="https://picsum.photos/365/527" alt="projects-picture-one" width="365" height="527" />
</picture>
<div class="slide-desc">
<h3>Delivery of Automation Equipment</h3>
<p>Year: 2015</p>
<p>Customer: Turkmenbashi Complex of oil refineries</p>
</div>
</div>
<div class="slider-wrapper">
<picture>
<img src="https://picsum.photos/365/527?" alt="projects-picture-two" width="365" height="527" />
</picture>
<div class="slide-desc">
<h3>Supply, Installation and Commissioning of Yoloten Gas Metering Station</h3>
<p>Year: 2016</p>
<p>Customer: Turkmengas</p>
</div>
</div>
<div class="slider-wrapper">
<picture>
<img src="https://picsum.photos/365/527?0" alt="projects-picture-three" width="365" height="527" />
</picture>
<div class="slide-desc">
<h3>EPC project on Construction of Water Purification System</h3>
<p>Year: 2017</p>
<p>Customer: Municipality of Ashgabat</p>
</div>
</div>
<div class="slider-wrapper">
<picture>
<img src="https://picsum.photos/365/527?1" alt="projects-picture-four" width="365" height="527" />
</picture>
<div class="slide-desc">
<h3>Chaloyuk Gas Metering Station</h3>
<p>Year: 2018</p>
<p>Customer: Turkmengas</p>
</div>
</div>
<div class="slider-wrapper">
<picture>
<img src="https://picsum.photos/365/527?2" alt="projects-picture-five" width="365" height="527" />
</picture>
<div class="slide-desc">
<h3>Supply, Installation and Commissioning of Bagtyyarlyk-2 Fiscal Gas Metering Station</h3>
<p>Year: 2016</p>
<p>Customer: Turkmengas</p>
</div>
</div>
<div class="slider-wrapper">
<picture>
<img src="https://picsum.photos/365/527?3" alt="projects-picture-six" width="365" height="527" />
</picture>
<div class="slide-desc">
<h3>Supply of Electrical & Instruments spare parts for offshore</h3>
<p>Year: 2018</p>
<p>Customer: Petronas Charigali Turkmenistan Sdn. Bhd.</p>
</div>
</div>
<div class="slider-wrapper">
<picture>
<img src="https://picsum.photos/365/527?4" alt="projects-picture-seven" width="365" height="527" />
</picture>
<div class="slide-desc">
<h3>Supply of required spare parts for overhauling of various pumps</h3>
<p>Year: 2021</p>
<p>Customer: Lukoil Uzbekistan</p>
</div>
</div>
<div class="slider-wrapper">
<picture>
<img src="https://picsum.photos/365/527?5" alt="projects-picture-eight" width="365" height="527" />
</picture>
<div class="slide-desc">
<h3>Supply, installation and commissioning of custody transfer metering units</h3>
<p>Year: 2022</p>
<p>Customer: Turkmengas</p>
</div>
</div>
</div>
<div class="project__buttons wow animate__animated animate__fadeInRight">
<svg id="button1" class="project__buttons-prev" width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="24.5" stroke="black" />
<path d="M29 34L20 25L29 16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg id="button2" class="project__buttons-next" width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="24.5" stroke="black" />
<path d="M21 34L30 25L21 16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</section>Источник: Stack Overflow на русском