Swiper Pagination(分页) - pagination

使用分页器导航。分页器可使用小圆点样式(默认)、分式样式或进度条样式。
swiper5新增可以通过设置Swiper的风格--swiper-theme-color或单独设置分页器风格--swiper-pagination-color来改变分页器颜色。
如果只有一个slide,则隐藏分页器导航(6.8.1)。

pagination信息

类型:
object
启用版本:
4.0.0

效果演示

slider1
slider2
slider3
 

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面,需要自定义样式。-->
</div>
<script language="javascript"> 
var mySwiper = new Swiper('.swiper',{
pagination: {
    el: '.swiper-pagination',
  },
})
</script>
<style type="text/css">
  .swiper{
    --swiper-theme-color: #ff6600;
    --swiper-pagination-color: #00ff33;/* 两种都可以 */
  }
</style>