Как определить, отображается ли определенный слайд с классом? - PullRequest
Новая
       10

Как определить, отображается ли определенный слайд с классом?

0 голосов
/ 23 сентября 2018

У меня инициализированы slidesPerView: 3 и slidesPerGroup: 3, и у меня есть класс с именем .section-xx-start для разделения каждого «сечения» в виде карусели на временной шкале, и каждый раз слайд с классом .section-xx-startв представлении (независимо от того, какая позиция, 1-й, 2-й или 3-й) цвет фона изменяется.Я не могу найти параметр / метод для этого.Это то, что я до сих пор: 

<div class="swiper-slide section-one-start">
    ...
</div>
<div class="swiper-slide">
    ...
</div>
<div class="swiper-slide">
    ...
</div>
<div class="swiper-slide">
    ...
</div>
<div class="swiper-slide">
    ...
</div>
<div class="swiper-slide section-two-start">
    ...
</div>

<script>
    var mySwiper = new Swiper ('.swiper-container', {
        slidesPerView: 3,
        slidesPerGroup: 3,
        spaceBetween: 50,
        grabCursor: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });

    const nextButton = document.querySelector('.swiper-button-next');
    const prevButton = document.querySelector('.swiper-button-prev');

    function changeBgColor() {
       if(slideWithClassIsInViewPort) {
           this.style.backgroundColor = "var(--navy)";
       } else {
           //do nothing
       }
    }

    nextButton.addEventListener('click', changeBgColor);
    prevButton.addEventListener('click', changeBgColor);
</script>

Я просто не уверен, как применить эту часть "slideWithClassIsInViewPort".Если есть какие-либо другие предложения по улучшению моего кода, пожалуйста, предложите!Цени любую помощь!

Редактировать: Посетить (удален), чтобы увидеть слайдер.

1 Ответ

0 голосов
/ 23 сентября 2018

Вы можете просто проверить состояние отображения для текущего слайда, если вы используете отображение правила CSS для скрытия / показа слайдов.

Пример: 

if(slide.style.display ='block'){
  // do whatever
}

Редактировать:

Я не уверен, исправили ли вы это или нет, но в случае, если вы этого не сделали, в вашем файле main.js есть код, который записывает текущий индекс ползунка на консоль. 

const button = document.querySelector('.swiper-button-next');

function consoleLog() {
    console.log(mySwiper.activeIndex);
}

button.addEventListener('click', consoleLog);

Когда вы нажимаете «Далее» на слайде, я предполагаю, что отображается количество столбцов, которые оно показало.И так как каждый слайд показывает 3 столбца в каждом, индекс, вероятно, работает вокруг этого, там 3, 6, 9, 12 и т. Д. Таким образом, чтобы установить другой фон или то, что вы пытаетесь сделать, для каждого слайда вы можете сделать что-то вродеэто:

Пример: 

var currentIndex = mySwiper.activeIndex;

function changeBg(){
if(currentIndex == 3) // second slide {
slider.style.background='white';
}
if(currentIndex == 6) // third slide {
slider.style.background='blue';
} 

button.addEventListener('click', changeBg);

Есть, вероятно, лучшие способы сделать это, но у меня сейчас не так много времени, так что это лучшее, что я мог сделать.

...