Юзай
slidesPerView: 'auto', и в css задавай ширину блоков, слайдер автоматически подстроится под размеры
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide infoPost">
<div class="infoText">
<h2>Коллекция авторских коробок</h2>
<p>Бесплатная доставка по городу Воронеж от 2000 рублей</p>
<a href="">Купить</a>
</div>
</div>
<div class="swiper-slide imgPost1"> </div>
<div class="swiper-slide infoPost">
<div class="infoText">
<h2>Коллекция авторских коробок</h2>
<p>Бесплатная доставка за город от 3999 рублей</p>
<a href="">Купить</a>
</div>
</div>
<div class="swiper-slide imgPost2"> </div>
<div class="swiper-slide infoPost">
<div class="infoText">
<h2>Коллекция авторских коробок</h2>
<p>Бесплатная доставка по городу от 1700 рублей</p>
<a href="">Купить</a>
</div>
</div>
<div class="swiper-slide imgPost3"> </div>
</div>
<!-- Add Arrows -->
<div class="btns">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script src="js/slider.js"></script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
spaceBetween: 0,
// init: false,
loop: true,
slidesPerGroup: 2,
autoplay: {
delay: 7000,
disableOnInteraction: false
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
300: {
<b> slidesPerView: 'auto',</b>
spaceBetween: 0,
},
768: {
slidesPerView: 'auto',
spaceBetween: 0,
},
1024: {
slidesPerView: 'auto',
spaceBetween: 0,
},
}
});
.infoPost {
width: 1165px;
height: auto;
margin-left: -150px;
background: url("../img/bac-slider.png") no-repeat;
mix-blend-mode: multiply;
background-position: top center;
}
.imgPost1 {
width: 750px;
}
.imgPost2 {
width: 750px;
}
.imgPost3 {
width: 750px;
}
