0

У меня есть слайдер, и когда я кликаю по одному из изображений в нем, большой слайдер, содержащий те же изображения создается и отображается на странице, а все остальные элементы скрываются.

Но если я кликаю именно по первому изображению первого (меньшего) слайдера, пролистываю какое-то количество изображений, а затем закрываю больший слайдер, в меньшем слайдере перестает работать переключение изображений (слайдинг)

Я заметил, что если я выключу свойство 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 первого слайдера включено?

3

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Посмотрите другие вопросы с метками или задайте свой вопрос.