溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

swiper插件自定義切換箭頭按鈕

發(fā)布時間：2020-09-27 18:29:21 來源：腳本之家 閱讀：234 作者：_六月 欄目：web開發(fā)

不知道大家在使用swiper時有沒有遇到這樣一種需求，swiper插件自定義切換箭頭按鈕，話不多說，直接上gif。

swiper插件自定義切換箭頭按鈕

也就是需要把左右切換的箭頭移到容器的外面，自定義箭頭的樣式。
給swiper容器再加一個父容器，兩個容器之間留下間隙，箭頭定位到間隙之間就ok了。
箭頭默認是絕對定位的，給父容器一個相對定位，就能夠調(diào)整箭頭位置。此外箭頭用的是背景圖，改變箭頭大小的同時記得改變背景圖大小。上代碼。

css:

<style>
    .out_container{
      width: 280px;
      height: 150px;
      margin: 100px auto;
      position: relative;
      outline: 1px solid black;
    }
    .in_container{
      width: 216px;
      height: 130px;
      margin: 0 auto;
      overflow: hidden;
    }
    .swiper_btn{
      width: 20px;
      height: 20px;
      background-size: contain;
    }
  </style>

html:

<body>
  <div class="out_container">
    <div class="in_container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="" alt=""></div>
        <div class="swiper-slide"><img src="" alt=""></div>
        <div class="swiper-slide"><img src="" alt=""></div>
      </div>
      <div class="swiper-button-prev swiper_btn"></div>
      <div class="swiper-button-next swiper_btn"></div>
    </div>
  </div>
</body>

js:

<script>
  var mySwiper = new Swiper('.in_container', {
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
  })
</script>

效果如下

swiper插件自定義切換箭頭按鈕

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手