首頁 > web前端 > js教程 > 主體

swiper插件怎樣切換箭頭按鈕

php中世界最好的语言
發布: 2018-04-13 13:39:20
原創
2962 人瀏覽過

這次帶給大家swiper外掛怎麼切換箭頭按鈕,swiper外掛切換箭頭按鈕的注意事項有哪些,以下就是實戰案例,一起來看一下。

也就是需要把左右切換的箭頭移到容器的外面,自訂箭頭的樣式。
為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('.in_container', {
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
  })
</script>
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

Angular怎麼實作定時器效果

#vue.js的資料傳遞與資料分發步驟詳解

以上是swiper插件怎樣切換箭頭按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!