vue轮播图插件el-carousel与swiper

最新推荐文章于 2024-08-31 08:21:24 发布

锦瑟思年华

最新推荐文章于 2024-08-31 08:21:24 发布

阅读量1.1k

点赞数

分类专栏：基础微服务文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_40011778/article/details/120725357

版权

基础同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

微服务

11 篇文章 0 订阅

订阅专栏

本文探讨了在前端开发中，使用element-ui的el-carousel与swiper组件的差异。el-carousel在PC端表现良好，但不支持手机手动滑动，而swiper则提供了手机滑动支持和丰富的配置选项，如循环播放、分页点击跳转等，更适合移动端应用。

摘要由CSDN通过智能技术生成

el-carousel

<el-carousel trigger="click" height="150px">
          <el-carousel-item v-for="item in banner" :key="item.index" >
            <img :src="item.IMG" />
          </el-carousel-item>
        </el-carousel>

缺点：适用于pc浏览器不适用于手机端不能手动划动

swiper支持手机滑动(推荐)

<swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="item in banner" :key="item.index">
        <img :src="item.IMG" /></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

在data()函数中添加swiperOption参数

 data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
      }
      }