vue中使用swiper,左右箭頭點(diǎn)擊沒有效果問題及解決

更新時(shí)間：2023年05月18日 08:52:00 作者：沙門空海

這篇文章主要介紹了vue中使用swiper,左右箭頭點(diǎn)擊沒有效果問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue使用swiper,左右箭頭點(diǎn)擊沒有效果

swiper作為一個(gè)開源的前端組件，主要用來做各種頁面切換輪播的效果。

在做左右切換效果時(shí)，發(fā)現(xiàn)點(diǎn)擊左右箭頭沒有效果，原來是需要在左右箭頭的頁面標(biāo)簽上添加點(diǎn)擊事件才行。

代碼如下，親測(cè)可用

<swiper ref="mySwiper" :options="swiperOptions">
                <swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
                <swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
                <swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
                <swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
                <swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
                <swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
                <!-- Add Pagination -->
                <div class="swiper-pagination" slot="pagination"></div>
              </swiper>
              <!-- Add Arrows -->
              <div class="swiper-button-next" slot="button-next" @click="next"></div>
              <div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
data(){
      return{
        swiperOptions: {
          slidesPerView: 3,
          slidesPerGroup: 3,
          loopFillGroupWithBlank: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        },
      }
    },
computed:{
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
methods:{
      prev(){
        this.swiper.slidePrev();
      },
      next(){
        this.swiper.slideNext();
      },
}

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

不知道大家在使用swiper時(shí)有沒有遇到這樣一種需求，話不多說，直接上gif。

這里寫圖片描述

也就是需要把左右切換的箭頭移到容器的外面，自定義箭頭的樣式。

給swiper容器再加一個(gè)父容器，兩個(gè)容器之間留下間隙，箭頭定位到間隙之間就ok了。

箭頭默認(rèn)是絕對(duì)定位的，給父容器一個(gè)相對(duì)定位，就能夠調(diào)整箭頭位置。此外箭頭用的是背景圖，改變箭頭大小的同時(shí)記得改變背景圖大小。

上代碼。

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

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

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

效果如下