Сижу мучаюсь 3 часа... Облазил интернет и не понимаю, что делать. Когда добавляю размеры для мобильной версии к swiper, то получается так (картинка 1.)
, А нужно так
При обновлении страницы (если обновить раз 5) то он встает на свои места, но все равно опять так же
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 30,
stretch: 1,
depth: 500,
modifier: 1,
slideShadows : true,
},
pagination: {
el: '.swiper-pagination',
},
});
</script>
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
// Default parameters
slidesPerView: 4,
spaceBetween: 40,
// Responsive breakpoints
breakpoints: {
// when window width is <= 320px
320: {
slidesPerView: 1,
spaceBetween: 10
},
// when window width is <= 480px
480: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is <= 640px
640: {
slidesPerView: 3,
spaceBetween: 30
}
}
})
</script>
