jsfiddle: https://jsfiddle.net/h59nkjoy/5/
let album_images_slider = new Swiper("#album_images_slider", {
direction: "horizontal",
allowTouchMove: false,
speed: 600,
// autoplay: {
// delay: 3000
// },
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
let albums_slider = new Swiper("#albums_slider", {
direction: "horizontal",
spaceBetween: 30,
slidesPerView: 4,
allowTouchMove: false,
speed: 600,
// autoplay: {
// delay: 3000
// },
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
$(function() {
if (album_images_slider.slides.length < 2) {
album_images_slider.params.loop = false;
album_images_slider.update();
console.log(album_images_slider.params.loop);
} else {
album_images_slider.params.loop = true;
album_images_slider.update();
console.log(album_images_slider.params.loop);
}
})
.layer {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
min-height: 100vh;
background: rgb(36, 36, 36);
color: #fff;
}
#album_images_slider_scale {
width: 1200px;
height: auto;
margin: 0 auto;
}
#album_images_slider_scale .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: rgb(55, 55, 55);
color: #fff;
border: none;
}
#album_images_slider_scale img {
width: 100%;
height: auto;
margin: 0!important;
border: none!important;
}
#album_images_slider {
width: 600px;
height: auto;
margin: 0 auto;
}
#album_images_slider .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: rgb(55, 55, 55);
color: #fff;
border: none;
}
#album_images_slider img {
width: 100%;
height: auto;
}
<link href="http://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/album.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="swiper/swiper-bundle.min.js"></script>
<script src="js/swiper_init.js"></script>
<script src="js/album.js" defer></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="swiper-container" id="album_images_slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://pbs.twimg.com/media/DtQ5AhzX4AUGQeL.jpg:large">
</div>
<div class="swiper-slide">
<img src="https://dbw4iivs1kce3.cloudfront.net/680x/2013/06/media-image-346120-article-ajust_930.jpg">
</div>
<div class="swiper-slide">
<img src="https://stihi.ru/pics/2019/11/13/5598.jpg">
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
У меня есть слайдер с изображениями (album_images_slider
). В одном из своих предыдущих вопросов на русском SO, мне ответили, что для того, чтобы в слайдере не дублировались изображения, когда их меньше, чем значение параметра slidesPerView или когда их количество равно slidesPerView, нужно прописать loop: false
.
Поэтому я решил исключить инициализацию параметра loop
в слайдере (удалил строку loop: true
) из объявления слайдера, и задавать loop: false
, если количество слайдов меньше либо равно slidesPerView, а в противном случае задавать loop: true
.
Значение loop изменяется, console.log() показывает, что всё в порядке, но при этом почему-то само по себе изменение loop не даёт никакого эффекта.
Из-за того, что loop: true
было удалено из объявления слайдера, теперь в слайдере при любом количестве находящихся в нем слайдов отсутствует поведение loop
. К тому же почему-то не работает .swiper-button-prev
, кнопка почему-то всегда имеет класс disabled.
Как сделать так, чтобы loop
изменялся динамически? И как сделать так, чтобы заработал .swiper-button-prev?
UPD: Я попробовал удалять и заново создавать Swiper:
$(function() {
if (album_images_slider.slides.length < 2) {
album_images_slider.params.loop = false;
album_images_slider.update();
console.log(album_images_slider.params.loop);
}
else {
delete album_images_slider;
let album_images_slider = new Swiper("#album_images_slider", {
direction: "horizontal",
allowTouchMove: false,
speed: 600,
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
console.log(album_images_slider.params.loop);
}
})
Теперь по какой-то причине заработал .swiper-button-prev, но loop
всё не работает, хотя console.log показывает, что loop: true