滑动分页项目符号：访问幻灯片的分页项目符号的样式

问题描述 投票：0回答：1

我创建了这个带有分页项目符号的 Swiper 滑块，该滑块具有进度条分页。它会更改活动幻灯片上项目符号的颜色（更改为 #000）。有没有办法让已访问的幻灯片的项目符号的颜色也发生变化（更改为

#000
） - 所以只有未访问的幻灯片的项目符号具有灰色的
#DDD
背景？

这是我的代码：

var mySwiper = new Swiper('.swiper-container', {
        loop: true,
        slidesPerView: 1,        
        autoplay: {
            delay: 5000,
        }, 
        effect: 'fade',
        fadeEffect: {
          
            crossFade: true
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: 'true',
            type: 'bullets',
            renderBullet: function (index, className) {
                return '<span class="' + className + '">' + '<i class="progress-bar-bg"></i>' + '<b class="progress-bar-cover"></b>'  + '</span>';
              },
        },
})
:root {
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bullet-width: 40px;
    --swiper-pagination-bullet-height: 2px;
}


body {
  font-family: Helvetica;
  color: #000;
}

.swiper-container {
  width: 100%; height: 100vh;
}

.swiper-wrapper {
  width: 100%; height: 100%; 
}

.swiper-slide {
  font-size: 100px; text-align: center; 
  line-height:100vh;
}

.swiper-pagination-bullet {
    position: relative;
    height: auto;
    opacity: 1;
    margin-right: 20px;
    background-color: transparent;
  
    .progress-bar-bg {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 2px;
        background-color: #DDD;
    }
    .progress-bar-cover {
        position: absolute;
        bottom: 0;
        left:  0;
        z-index: 2;
        width: 0%;
        height: 2px;
        background-color: #000;
    }
}

.swiper-pagination-bullet-active {
    background-color: transparent;
    b {  
        animation-name: countingBar;
        animation-duration: 3s;
        animation-timing-function: ease-in;
        animation-iteration-count: 1;
        animation-direction: alternate ;
        animation-fill-mode:forwards;
    }
}

@keyframes countingBar {
    0% {width: 0;}
    100% {width:100%;}
}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
</div>

任何指示都会有巨大的帮助。非常感谢。

在 JavaScript 中，我尝试通过单击添加事件侦听器来访问幻灯片，并之前添加了“visited-slide”类。但是，它需要单击，但不会随着幻灯片动画的继续自动更新项目符号的颜色。

javascript css sass swiper.js
1个回答
0
投票

您可以在初始化中定义事件处理程序。例如，使用您的代码：

var mySwiper = new Swiper('.swiper-container', {
  loop: true,
  slidesPerView: 1,        
  autoplay: {
    delay: 5000,
  }, 
  effect: 'fade',
  fadeEffect: {

    crossFade: true
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: 'true',
    type: 'bullets',
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + '<i class="progress-bar-bg"></i>' + '<b class="progress-bar-cover"></b>'  + '</span>';
    },
  },
  /* this is new */
  on: {
    'slideChange': function() {
      const previousIndex = this.previousIndex;
      //const currentIndex = this.activeIndex;
      
      const bullets = document.querySelectorAll('.swiper-pagination-bullet');
      if(bullets && bullets.length > 0) {
        bullets[previousIndex].classList.add("visited");
      }
    }  
  }
  /* */
})
:root {
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bullet-width: 40px;
    --swiper-pagination-bullet-height: 2px;
}


body {
  font-family: Helvetica;
  color: #000;
}

.swiper-container {
  width: 100%; height: 100vh;
}

.swiper-wrapper {
  width: 100%; height: 100%; 
}

.swiper-slide {
  font-size: 100px; text-align: center; 
  line-height:100vh;
}

.swiper-pagination-bullet {
    position: relative;
    height: auto;
    opacity: 1;
    margin-right: 20px;
    background-color: transparent;
  
    .progress-bar-bg {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 2px;
        background-color: #DDD;
    }
    .progress-bar-cover {
        position: absolute;
        bottom: 0;
        left:  0;
        z-index: 2;
        width: 0%;
        height: 2px;
        background-color: #000;
    }
}

.swiper-pagination-bullet-active {
    background-color: transparent;
    b {  
        animation-name: countingBar;
        animation-duration: 3s;
        animation-timing-function: ease-in;
        animation-iteration-count: 1;
        animation-direction: alternate ;
        animation-fill-mode:forwards;
    }
}

@keyframes countingBar {
    0% {width: 0;}
    100% {width:100%;}
}
/* this is new */
.swiper-pagination-bullet.visited > i {
  background-color: #000;
}
/* */
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
</div>

首先，我使用这个 CSS 来标记访问过的幻灯片：

.swiper-pagination-bullet.visited > i {
  background-color: #DDD;
}

接下来，我添加了一个事件处理程序，以便在幻灯片更改时执行某些操作：

var mySwiper = new Swiper('.swiper-container', {
  /* ... other options ... */
  on: {
    'slideChange': function() {
      const previousIndex = this.previousIndex;
      // const currentIndex = this.activeIndex;
      
      const bullets = document.querySelectorAll('.swiper-pagination-bullet');
      if(bullets && bullets.length > 0) {
        bullets[previousIndex].classList.add("visited");
      }
    }  
  }
})

来自有关

slideChange
事件的官方文档：

当前活动幻灯片更改时将触发事件

这就是我们想要的。这样做的好处是，我们可以捕获上一张幻灯片和新激活的幻灯片（顺便说一句，我们现在不需要这个，但我将其留在注释中，以防您稍后需要将其用于其他用途）上），或者更确切地说，我们可以捕获它们的索引。

由于我们可以知道上一张幻灯片是什么，并且由于项目符号的数量与幻灯片的数量相匹配，因此我们可以在 DOM 中查询项目符号，并更改其索引与上一张幻灯片的索引匹配的背景.

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.