Почему не удается получить слайды по индексам в Swiper.js?

HTML

    <div class="swiper-container" id="album_images_slider">
       <div class="swiper-wrapper">
         <div class="swiper-slide">
           <div class='img-wrap'>
             <img src="">
           </div>
         </div>
<div class="swiper-slide">
       <div class='img-wrap'>
         <img src="">
       </div>
     </div>
    </div>
        <div class="swiper-navigation">
         <div class="swiper-button-next"></div>
         <div class="swiper-button-prev"></div>
       </div>
    </div>

CSS

#album_images_slider_scale {
    width: 1000px;
    margin: 0 auto;
}
#album_images_slider_scale .swiper-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
#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;
    color: #fff;
    border: none;
    padding: 50px;
}
#album_images_slider_scale img {
    width: 100%;
    height: auto;
    margin: 0!important;
    border: none!important;
}

JavaScript

album_images_slider_scale = new Swiper("#album_images_slider_scale", {
                direction: "horizontal",
                slidesPerView: 1,
                allowTouchMove: false,
                loop: true,
                autoplay: {
                    delay: 3000
                },
            
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                }
            });

           function getPrevSlideIndex(swiper) {
                let previousIndex = swiper.realIndex - 2;
                console.log("previous index: " + previousIndex);
                if (previousIndex == -1) {
                    previousIndex = swiper.slides.length - 1;
                }
                return previousIndex;
            }

            function getNextSlideIndex(swiper) {
                let nextIndex = swiper.realIndex + 2;
                console.log("next index: " + nextIndex);
                if (nextIndex > swiper.slides.length - 1) {
                    nextIndex = 0;
                } 
                return nextIndex;
            }
            let prevSlideIndex = getPrevSlideIndex(album_images_slider_scale);
            let nextSlideIndex = 

            getNextSlideIndex(album_images_slider_scale);
            console.log("current slide index: " + album_images_slider_scale.realIndex);
            console.log("prev slide index: " + prevSlideIndex);
            console.log("next slide index: " + nextSlideIndex);

            let prevSlide = $("#album_images_slider_scale").children(".swiper-slide").eq(prevSlideIndex);
            let nextSlide = $("#album_images_slider_scale").children(".swiper-slide").eq(nextSlideIndex);
            console.log($(prevSlide).css("display"));
            console.log($(nextSlide).css("display"));

current slide index, prev slide index и next slide index выводятся, но получить, например, значение css свойства display не получается - в консоли отображается undefined вместо ожидаемого "block".

Я считаю, что проблема может крыться в том, что возможно не удается получить нужный .swiper-slide по индексу.

Как можно решить эту проблему?


Ответы (0 шт):