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.代碼格式

<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>

 

不僅如此，分頁器還可以設置位置等地方，都可以在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.代碼格式

<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-button-prev"></div><!--左箭頭。如果放置在swiper外面，需要自定義樣式。-->
    <div class="swiper-button-next"></div><!--右箭頭。如果放置在swiper外面，需要自定義樣式。-->
</div>
<script language="javascript"> 
  var mySwiper = new Swiper('.swiper', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>
<style type="text/css">
  .swiper{
    --swiper-theme-color: #ff6600;/* 設置Swiper風格 */
    --swiper-navigation-color: #00ff33;/* 單獨設置按鈕顏色 */
    --swiper-navigation-size: 30px;/* 設置按鈕大小 */
  }
</style>