У меня есть слайдер, и когда я кликаю по одному из изображений в нем, большой слайдер, содержащий те же изображения создается и отображается на странице, а все остальные элементы скрываются.
Но если я кликаю именно по первому изображению первого (меньшего) слайдера, пролистываю какое-то количество изображений, а затем закрываю больший слайдер, в меньшем слайдере перестает работать переключение изображений (слайдинг)
Я заметил, что если я выключу свойство autoplay
первого слайдера, то всё работает прекрасно.
HTML
<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" alt="">
</div>
<div class="swiper-slide">
<img src="https://im0-tub-ru.yandex.net/i?id=e13d927c1ca5aeb6bafd4cc795b68dea&n=13" alt="">
</div>
<div class="swiper-slide">
<img src="https://newyork.cbslocal.com/wp-content/uploads/sites/14578484/2012/06/83284744.jpg?w=1500" alt="">
</div>
<div class="swiper-slide">
<img src="https://wallbox.ru/wallpapers/main/201301/cb5c7e68c1854dc.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://stihi.ru/pics/2019/11/13/5598.jpg" alt="">
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</body>
CSS
.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: 80%;
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;
}
jsfiddle: случай, когда autoplay
включен (не работает): https://jsfiddle.net/seLn6c3w/
JS
let album_images_slider = new Swiper("#album_images_slider", {
direction: "horizontal",
slidesPerView: 1,
loop: true,
allowTouchMove: false,
speed: 600,
autoplay: {
delay: 3000
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
$("body").on("click", ".layer", function(event) {
let target = event.target;
if (!($(".swiper-container").has(target).length || $(target).hasClass("swiper-container"))) {
$(".layer").remove();
$("body *").show();
$(".navbar-toggler").hide();
let width = $(window).width() + getScrollBarWidth();
if (width < 992) {
$(".navbar-toggler").show();
$(".collapse").removeAttr("style");
$(".collapse:not(.show)").css("display", "none!important"); //Не ставится в none.
}
}
});
$("#album_images_slider").click(function(e) {
if (e.target.nodeName == "IMG") {
let currentSlide = album_images_slider.activeIndex;
$("body *").hide();
$("body").prepend(`<div class="layer"></div>`);
$(".layer").append(`
<div class="swiper-container" id="album_images_slider_scale">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://pbs.twimg.com/media/DtQ5AhzX4AUGQeL.jpg:large" alt="">
</div>
<div class="swiper-slide">
<img src="https://im0-tub-ru.yandex.net/i?id=e13d927c1ca5aeb6bafd4cc795b68dea&n=13" alt="">
</div>
<div class="swiper-slide">
<img src="https://newyork.cbslocal.com/wp-content/uploads/sites/14578484/2012/06/83284744.jpg?w=1500" alt="">
</div>
<div class="swiper-slide">
<img src="https://wallbox.ru/wallpapers/main/201301/cb5c7e68c1854dc.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://stihi.ru/pics/2019/11/13/5598.jpgg" alt="">
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
`);
if ($("#album_images_slider_scale img").height() > $(".layer").height()) {
$(".layer").height($("#album_images_slider_scale img").height());
}
let album_images_slider_scale = new Swiper("#album_images_slider_scale", {
direction: "horizontal",
slidesPerView: 1,
loop: true,
allowTouchMove: false,
autoplay: {
delay: 3000
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
}
});
jsfiddle: случай, когда autoplay
выключен (работает): https://jsfiddle.net/o9xfu0rw/
let album_images_slider = new Swiper("#album_images_slider", {
direction: "horizontal",
slidesPerView: 1,
loop: true,
allowTouchMove: false,
speed: 600,
autoplay: false,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
$("body").on("click", ".layer", function(event) {
let target = event.target;
if (!($(".swiper-container").has(target).length || $(target).hasClass("swiper-container"))) {
$(".layer").remove();
$("body *").show();
$(".navbar-toggler").hide();
let width = $(window).width() + getScrollBarWidth();
if (width < 992) {
$(".navbar-toggler").show();
$(".collapse").removeAttr("style");
$(".collapse:not(.show)").css("display", "none!important"); //Не ставится в none.
}
}
});
$("#album_images_slider").click(function(e) {
if (e.target.nodeName == "IMG") {
let currentSlide = album_images_slider.activeIndex;
$("body *").hide();
$("body").prepend(`<div class="layer"></div>`);
$(".layer").append(`
<div class="swiper-container" id="album_images_slider_scale">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://pbs.twimg.com/media/DtQ5AhzX4AUGQeL.jpg:large" alt="">
</div>
<div class="swiper-slide">
<img src="https://im0-tub-ru.yandex.net/i?id=e13d927c1ca5aeb6bafd4cc795b68dea&n=13" alt="">
</div>
<div class="swiper-slide">
<img src="https://newyork.cbslocal.com/wp-content/uploads/sites/14578484/2012/06/83284744.jpg?w=1500" alt="">
</div>
<div class="swiper-slide">
<img src="https://wallbox.ru/wallpapers/main/201301/cb5c7e68c1854dc.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://stihi.ru/pics/2019/11/13/5598.jpgg" alt="">
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
`);
if ($("#album_images_slider_scale img").height() > $(".layer").height()) {
$(".layer").height($("#album_images_slider_scale img").height());
}
let album_images_slider_scale = new Swiper("#album_images_slider_scale", {
direction: "horizontal",
slidesPerView: 1,
loop: true,
allowTouchMove: false,
autoplay: {
delay: 3000
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
}
});
Как я могу сделать так, чтобы всё работало хорошо даже если свойствоautoplay
первого слайдера включено?