首頁 >web前端 >js教程 >在swiper插件中如何實現切換箭頭按鈕

在swiper插件中如何實現切換箭頭按鈕

亚连原創: 2018-06-14 16:52:082773瀏覽

這篇文章主要為大家詳細介紹了swiper插件自訂切換箭頭按鈕，具有一定的參考價值，有興趣的小夥伴們可以參考一下

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

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

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>
  <p class="out_container">
    <p class="in_container">
      <p class="swiper-wrapper">
        <p class="swiper-slide"><img src="" alt=""></p>
        <p class="swiper-slide"><img src="" alt=""></p>
        <p class="swiper-slide"><img src="" alt=""></p>
      </p>
      <p class="swiper-button-prev swiper_btn"></p>
      <p class="swiper-button-next swiper_btn"></p>
    </p>
  </p>
</body>

js:

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

效果如下

#上面是我整理給大家的，希望未來對大家有幫助。

在微信小程式中如何使用三級連動選擇器

PHP閉包和匿名函數（詳細教程）

在Vue元件中有關自訂事件（詳細教學）

以上是在swiper插件中如何實現切換箭頭按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php css html 闭包 JS 事件选择器微信小程序

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：在vue+swiper中如何實現側滑選單效果下一篇：在vue+swiper中如何實現側滑選單效果

看更多