vue+swiper实现轮播效果一个页面放多个轮播

浅浅的花香味﹌ 2022-01-28 05:53 1237阅读 0赞

--------------------

**多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)**

--------------------

vue页面实现用swiper的轮播，话不多说，直接开始贴代码：

一 、首先要先安装swiper插件：

npm install swiper --save-dev （安装淘宝镜像的也可以cnpm更快一点）

二 、main.js引入swiper样式

import 'swiper/dist/css/swiper.css';

三 、再页面中引入swiper

import Swiper from "swiper";

</script>

到此已经可以开始直接使用了

html：

js:

注：柚子找了半天也没有找到有直接鼠标悬停的方法的，所以只好手写了一个，大家可以看一下，也可能是我看的少，如果有哪位大佬有更好的方法的话，欢迎来交流，谢谢！！！如果需要鼠标移入的时候做一些操作，比如鼠标移入需要暂停轮播，移出之后继续轮播的就需要在js里的methods里面写上下面的两个方法，方法在上面html里面已经定义过了，如果不需要可以删掉：

methods:{
            /*鼠标移入停止轮播,5秒后继续轮播，鼠标离开 继续轮播*/
            comtainer_enter(){
                this.swiper.autoplay.stop();
                setTimeout(this.comtainer_leave,2000 );//两秒加上默认的三秒
            },
            comtainer_leave () {
                this.swiper.autoplay.start();
            }
        }

style：

上面的是页面中有单个轮播的，如果需要多个轮播的话，只需要定义不通的类就可以了，下面直接贴出全部的代码：

<template>
      <div class="hello">
        
        <div
          class="banner1 swiper-container"
          @mouseenter="comtainer_enter1"
          @mouseleave="comtainer_leave1"
        >
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in arr1" :key="index">
              
              <img :src="item.img_url" alt>
            </div>
          </div>
          
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
          
          <div class="swiper-pagination"></div>
          
        </div>
    
        
        <div
          class="banner2 swiper-container"
          @mouseenter="comtainer_enter2"
          @mouseleave="comtainer_leave2"
        >
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in arr2" :key="index">
              
              <img :src="item.img_url" alt>
            </div>
          </div>
          
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
          
          <div class="swiper-pagination"></div>
          
        </div>
      </div>
    </template>
    
    <script>
    import Swiper from "swiper";
    import { setTimeout } from "timers";
    export default {
      name: "HelloWorld",
      data() {
        return {
          swiper1: "",
          swiper2: "",
          arr1: [
            { img_url: require("@/assets/a.png") },
            { img_url: require("@/assets/b.png") },
            { img_url: require("@/assets/c.png") },
            { img_url: require("@/assets/d.png") },
            { img_url: require("@/assets/e.png") }
          ],
          arr2: [
            { img_url: require("@/assets/a.png") },
            { img_url: require("@/assets/b.png") },
            { img_url: require("@/assets/c.png") },
            { img_url: require("@/assets/d.png") },
            { img_url: require("@/assets/e.png") }
          ]
        };
      },
      mounted() {
        this.swiper1 = new Swiper(".banner1", {
          autoplay: {
            //自动轮播
            disableOnInteraction: false //当设置为false时，用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay。
          },
          pagination: {
            //指示点
            el: ".swiper-pagination",
            clickable :true //为true时点击指示点会切换slide
          },
          grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
          loop: true,
          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
          }
        });
    
        this.swiper2 = new Swiper(".banner2", {
          autoplay: {
            //自动轮播
            disableOnInteraction: false //当设置为false时，用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay。
          },
          pagination: {
            //指示点
            el: ".swiper-pagination",
            clickable :true //为true时点击指示点会切换slide
          },
          grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
          loop: true,
          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
          }
        });
      },
      methods: {
        /*鼠标移入停止轮播,5秒后继续轮播，鼠标离开 继续轮播*/
        comtainer_enter1() {
          this.swiper1.autoplay.stop();
          setTimeout(this.comtainer_leave1, 2000); //两秒加上默认的三秒
        },
        comtainer_leave1() {
          this.swiper1.autoplay.start();
        },
        comtainer_enter2() {
          this.swiper2.autoplay.stop();
          setTimeout(this.comtainer_leave2, 2000); //两秒加上默认的三秒
        },
        comtainer_leave2() {
          this.swiper2.autoplay.start();
        }
      }
    };
    </script>
    <style scoped>
    .swiper-container {
      width: 500px;
      height: 300px;
      margin: 20px auto;
    }
    </style>

[swiper中文网：  https://www.swiper.com.cn/][swiper_ https_www.swiper.com.cn]      还有需要的朋友可以多看一下api文档

ok，到此结束，就是这么简单，希望能帮助一些朋友。

[swiper_ https_www.swiper.com.cn]: https://www.swiper.com.cn/