vue中使用swiper,左右箭头点击没有效果问题及解决

更新时间：2023年05月18日 08:52:00 作者：沙门空海

这篇文章主要介绍了vue中使用swiper,左右箭头点击没有效果问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue使用swiper,左右箭头点击没有效果

swiper作为一个开源的前端组件，主要用来做各种页面切换轮播的效果。

在做左右切换效果时，发现点击左右箭头没有效果，原来是需要在左右箭头的页面标签上添加点击事件才行。

代码如下，亲测可用

<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时有没有遇到这样一种需求，话不多说，直接上gif。

这里写图片描述

也就是需要把左右切换的箭头移到容器的外面，自定义箭头的样式。

给swiper容器再加一个父容器，两个容器之间留下间隙，箭头定位到间隙之间就ok了。

箭头默认是绝对定位的，给父容器一个相对定位，就能够调整箭头位置。此外箭头用的是背景图，改变箭头大小的同时记得改变背景图大小。

上代码。

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

效果如下

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue 判断两个时间插件结束时间必选大于开始时间的代码
这篇文章主要介绍了vue 判断两个时间插件结束时间必选大于开始时间的代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
详解vue3.x页面功能拆分方式
本文主要介绍了vue3.x页面功能拆分方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
VUE前后端学习tab写法实例
在本篇文章里小编给大家分享了关于VUE前后端学习tab写法实例以及相关知识点，需要的朋友们参考下。
2019-08-08
vue使用rem实现移动端屏幕适配
这篇文章主要介绍了vue使用rem实现移动端屏幕适配的相关知识，通过实例代码介绍了vue用rem布局的实现代码,需要的朋友可以参考下
2018-09-09
vue-router传递参数的几种方式实例详解
vue-router传递参数分为两大类，一类是编程式的导航 router.push另一类是声明式的导航 <router-link>，本文通过实例代码给大家介绍vue-router传递参数的几种方式，感兴趣的朋友跟随小编一起看看吧
2018-11-11
使用Vue自定义数字键盘组件(体验度极好)
最近做 Vue 开发，因为有不少页面涉及到金额输入，产品老是觉得用原生的 input 进行金额输入的话体验很不好，于是自己动手写了一个使用Vue自定义数字键盘组件，具体实现代码大家参考下本文
2017-12-12
elementui源码学习仿写一个el-tooltip示例
本篇文章记录仿写一个el-tooltip组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节，本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件
2023-07-07
Vue3之路由的元数据信息meta详解
这篇文章主要介绍了Vue3之路由的元数据信息meta详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
对vue中的input输入框进行邮箱验证方式
这篇文章主要介绍了对vue中的input输入框进行邮箱验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue使用JSEncrypt对密码本地存储时加解密的实现
本文主要介绍了vue使用JSEncrypt对密码本地存储时加解密，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07