在vue中安装5版本的swiper，及两个小案例的实现

最新推荐文章于 2024-07-08 05:06:13 发布

coderdwy

最新推荐文章于 2024-07-08 05:06:13 发布

阅读量3.8k

点赞数 3

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/blue__k/article/details/110327800

版权

vue 专栏收录该内容

26 篇文章 5 订阅

订阅专栏

本文介绍了如何在Vue项目中利用vue-awesome-swiper库创建一个具备左右切换、拖动切换和自动切换功能的图片轮播组件。通过安装swiper库，配置swiperOptions，设置slide数量、间距、切换速度等参数，实现图片轮播，并在mounted钩子中进行初始化操作。示例代码展示了如何加载多张图片并进行轮播。

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

可以实现的功能：点击左右切换图片，拖拽图片使图片切换，自动切换图片

cmd中输入命令 npm install swiper@5.4.5 vue-awesome-swiper --save

main.js中编写输入代码

/* 引入swiper */
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

需要用到swiper的vue文件中，引入响应组件如

import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

全部代码如下：

<template>
  <div>
    <div class="swiper-container">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
          <img src="../../assets/img/er.png" alt />
        </swiper-slide>
        <swiper-slide>
          <img src="../../assets/img/bg.png" alt />
        </swiper-slide>
      </swiper>
      <div class="swiper-button-prev swiper-button-black"></div>
      <div class="swiper-button-next swiper-button-black"></div>
    </div>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "Test",
  data() {
    return {
       swiperOptions: {
        pagination: {
          el: ".swiper-pagination"
        },
        loop: true,
        //切换速度
        speed: 1000,
        //左右箭头按钮
        navigation: {
          prevEl: ".swiper-button-prev",
          nextEl: ".swiper-button-next"
        },
        //不需要自动轮播时
        // autoplay: false,
      // 设置自动轮播的延迟时间
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      }
    };
  },
  /* 引入组件 */
  components: {
    Swiper,
    SwiperSlide,
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    this.swiper.slideTo(1, 1000, false);
  },
};
</script>
<style scoped>
.swiper-container {
  width: 200px;
  height: 100px;
  background-color: #f00;
  text-align: center;
}
</style>

使多张图片一起轮播，
效果图：
在这里插入图片描述
图片小而丑，但是效果实现了，，

代码如下：

<template>
  <div>
    <div class="swiper-container">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for='item in lists' :Key='item.id' class='s_img'>
          <img :src="item.src" alt="">
        </swiper-slide>
      </swiper>
      <div class="swiper-button-prev swiper-button-black"></div>
      <div class="swiper-button-next swiper-button-black"></div>
    </div>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "Test",
  data() {
    return {
      swiperOptions: {
        slidesPerView: 3,
        spaceBetween: 20,
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        //切换速度
        speed: 1000,
        //左右箭头按钮
        navigation: {
          prevEl: ".swiper-button-prev",
          nextEl: ".swiper-button-next",
        },
        //不需要自动轮播时
        // autoplay: false,
        // 设置自动轮播的延迟时间
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
      },
      lists:[
        { id: 1, src: require("../../assets/img/er.png")},
        { id: 2, src: require("../../assets/img/er.png")},
        { id: 3, src: require("../../assets/img/er.png")},
        { id: 4, src: require("../../assets/img/er.png")},
      ]
    };
  },
  /* 引入组件 */
  components: {
    Swiper,
    SwiperSlide,
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    this.swiper.slideTo(1, 1000, false);
  },
};
</script>
<style scoped>
.swiper-container {
  width: 200px;
  height: 100px;
  background-color: #f00;
  text-align: center;
}
.s_img{
  width:50px;
}
.s_img img{
  width:100%;
  height:100%;
}
</style>