Почему не удается получить слайды по индексам в 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 по индексу.
Как можно решить эту проблему?