WEB前端初学者笔记（20）--swiper中实现分页器和换页按钮

一.分页器

1.pagination

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

2.type样式

分页器样式是可以自定义的

‘bullets’ 圆点（默认）
‘fraction’ 分式
‘progressbar’ 进度条
‘custom’ 自定义

3.clickable

此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。

4.代码格式

 1 <div class="swiper">
 2     <div class="swiper-wrapper">
 3         <div class="swiper-slide">Slide 1</div>
 4         <div class="swiper-slide">Slide 2</div>
 5         <div class="swiper-slide">Slide 3</div>
 6     </div>
 7     <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
 8 </div>
 9 <script language="javascript"> 
10 var mySwiper = new Swiper('.swiper',{
11 pagination: {
12     el: '.swiper-pagination',
13   },
14 })
15 </script>
16 <style type="text/css">
17   .swiper{
18     --swiper-theme-color: #ff6600;
19     --swiper-pagination-color: #00ff33;/* 两种都可以 */
20   }
21 </style>

不仅如此，分页器还可以设置位置等地方，都可以在swiper官网https://www.swiper.com.cn/api/pagination/69.html查看具体属性，

二.前进后退按钮

1.navigation

使用前进后退按钮来控制Swiper切换。
swiper5新增可以通过设置Swiper的风格--swiper-theme-color或单独设置按钮风格--swiper-navigation-color来改变按钮颜色。
swiper5新增可以通过设置--swiper-navigation-size来调整按钮大小，默认是44px。

有时你的按钮不想放在container之内，点击时可能会有蓝色的边框，加上样式outline: none 可以去除。

2.样式

按钮是可以定义样式大小和位置的，都可以在官网查看

3.代码格式

 1 <div class="swiper">
 2     <div class="swiper-wrapper">
 3         <div class="swiper-slide">Slide 1</div>
 4         <div class="swiper-slide">Slide 2</div>
 5         <div class="swiper-slide">Slide 3</div>
 6     </div>
 7     <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
 8     <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
 9 </div>
10 <script language="javascript"> 
11   var mySwiper = new Swiper('.swiper', {
12     navigation: {
13       nextEl: '.swiper-button-next',
14       prevEl: '.swiper-button-prev',
15     },
16   });
17 </script>
18 <style type="text/css">
19   .swiper{
20     --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
21     --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
22     --swiper-navigation-size: 30px;/* 设置按钮大小 */
23   }
24 </style>