vue 使用swiper轮播图,自动轮播时鼠标移入暂停,鼠标移出再次播放,并给出多个轮播的处理方法以及后台获取数据时无法循环轮播解决方案_swiper9 vue 鼠标滚动-程序员宅基地

技术标签: swiper  Html/CSS/JS  Vue  vue  vue轮播图  

1、安装 vue-awesome-swiper

使用vue开发界面时,很多时候需要用到轮播图,有的时候需要在一个页面中使用多个轮播图,这个时候就需要用到单独的,鼠标移入暂停自动轮播,鼠标移出再次自动轮播。

npm install vue-awesome-swiper
2、代码部分
<template>
    <div class="icontent">
        <div @mouseenter="on_top_enter" @mouseleave="on_top_leave">
			<!-- 加上v-if="banner_data.length > 1" 来防止swiper出现无法循环播放的效果 -->
			<swiper class="my-swiper" v-if="banner_data.length > 1" :options="swiperOption" ref="mySwiper">
		    <!-- slides -->
		    <swiper-slide v-for="ba_data in banner_data">
		        <img :src="ba_data.img_url" alt="banner">
		    </swiper-slide>
		    <!-- 分页控制器 -->
		    <div class="swiper-pagination"  slot="pagination"></div>
		    <!-- 上一页 -->
		    <div class="swiper-button-prev" slot="button-prev"></div>
		    <!-- 下一页 -->
		    <div class="swiper-button-next" slot="button-next"></div>
			</swiper>
        </div>
		<div class="my-swiper" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">
            <swiper class="bafang_swiper" v-if="bannerbottom_data.length > 1" :options="swiperOption" ref="myBotSwiper">
                <!-- slides -->
                <swiper-slide v-for="bot_data in bannerbottom_data">
			    <img :src="bot_data.img_url" alt="bot_banner">
                </swiper-slide>
                <div class="swiper-pagination"  slot="pagination"></div>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    // 导入相关的包
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    import $ from 'jquery'
    // 使用模块
    Vue.use(VueAwesomeSwiper)
    export default {
        name: "index",
        data () {
            return {
                msg: 'index',
                // 配置轮播图的相关参数 使用时绑定到标签里的 options 属性
                swiperOption: {
                    // some swiper options/callbacks
                    // 所有的参数同 swiper 官方 api 参数
                    // 设置分页器
                    pagination: {
                        el: '.swiper-pagination',
                        // 设置点击可切换
                        clickable :true
                    },
                    // 设置前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    // 设置自动轮播
                    autoplay: { 
                        delay: 2000,
                        disableOnInteraction: false,
                    },
                    // 设置轮播可循环
                    loop : true
                },
                banner_data: [
                    {img_url:'http://img.bimg.126.net/photo/ZZ5EGyuUCp9hBPk6_s4Ehg==/5727171351132208489.jpg'},
                    {img_url:'http://img.juimg.com/tuku/yulantu/140218/330598-14021R23A410.jpg'},
                    {img_url:'http://h.hiphotos.baidu.com/lvpics/w=1000/sign=bb4d3e46ecf81a4c2632e8c9e71a6159/77094b36acaf2edd14b2c5db8a1001e939019345.jpg'}
                ],
                bannerbottom_data: [
                    {img_url:'http://img.bimg.126.net/photo/ZZ5EGyuUCp9hBPk6_s4Ehg==/5727171351132208489.jpg'},
                    {img_url:'http://img.juimg.com/tuku/yulantu/140218/330598-14021R23A410.jpg'},
                    {img_url:'http://h.hiphotos.baidu.com/lvpics/w=1000/sign=bb4d3e46ecf81a4c2632e8c9e71a6159/77094b36acaf2edd14b2c5db8a1001e939019345.jpg'}
                ]
            }
        },
        methods: {
	    	//通过获得的swiper对象来暂停自动播放
	    	on_bot_enter() {
                this.myBotSwiper.autoplay.stop()
            },
            on_bot_leave() {
                this.myBotSwiper.autoplay.start()
            },
            on_top_enter() {
                this.mySwiper.autoplay.stop()
            },
            on_top_leave() {
                this.mySwiper.autoplay.start()
            }
        },
		//计算属性,获得可以操作的swiper对象
        computed: {
            mySwiper() {
            	// mySwiper 是要绑定到标签中的ref属性
                return this.$refs.mySwiper.swiper
            },
            myBotSwiper() {
                return this.$refs.myBotSwiper.swiper
            }
        },
        created: function() {
        }
    }
</script>
<style scoped>
    .icontent{
        overflow: hidden;
        width: 100%;
    }
    .my-swiper{
        height: 500px;
    }
    .my-swiper:hover{
        cursor: pointer;
    }
    .my-swiper img{
        height: 100%;
        width: 100%;
    }
</style>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/haeasringnar/article/details/86288710

智能推荐

2021SC@SDUSC 山大智云 1.综述_sdcus-程序员宅基地

文章浏览阅读377次。2021SC@SDUSC 山大智云 1.综述2021SC@SDUSC0.项目简介"山大智云"是以网盘功能为基础的在线应用系统。以seafile开源版本为基础,拓展网盘的应用功能和场景化的业务适配。该项目已事先校园统一认证,文件锁,在线编辑预览,全文搜索,文件病毒扫描,审计,离线上传等功能。1.项目配置1.0 安装Ubuntu18.041.1 安装Dockerapt install docker.server1.2 创建Docker容器docker run -it -p 8000:800_sdcus

fdisk 分区及格式化-程序员宅基地

文章浏览阅读251次。# 对分区sdb操作, m 帮助fdisk /dev/sdb建好分区,格式化文件系统:挂载:mount /dev/sdb4 /3转载于:https://www.cnblogs.com/listenerln/p/7388655.html_fdisk可以格式化分区吗

bunsenlasb中文Linux,在线试用 200 多种 Linux 和 Unix 操作系统-程序员宅基地

文章浏览阅读178次。只要打开该网站,选择你需要的 Linux/Unix 发行版,然后开始试用!-- Sk(作者)不久前我们介绍过 OSBoxes ,该网站提供了一系列免费且开箱即用的 Linux 和 Unix 虚拟机。你可以在你的 Linux 系统中下载这些虚拟机并用 VirtualBox 或 VMWare workstation 试用。今天,我偶然发现一个名叫 “DistroTest” 的类似服务。与 OSBoxe..._bunsenlabs

Linux芯片级移植与底层驱动(基于3.7.4内核) --中断控制器_cpsid if-程序员宅基地

文章浏览阅读327次。3. 中断控制器驱动在Linux内核中,各个设备驱动可以简单地调用request_irq()、 enable_irq()、disable_irq()、local_irq_disable()、local_irq_enable()等通用API完 成中断申请、使能、禁止等功能。在将Linux移植到新的SoC时,芯片供应商需要提供该部分API的底层支持。local_irq_disabl_cpsid if

从10万到百亿营收的背后 | 同程旅游CTO V课堂实录_ctov;-程序员宅基地

文章浏览阅读2.7k次。转载酷饭网 http://qoofan.com/read/RnMkBREqGD.html前言在 10 多年的同程创业历程中,张海龙经历了从 5 人到万人的扩张、融资等过程,他对电子商务、O2O、在线旅游、创业历程、文化打造、技术团队提升等也有较深的理解和心得。作为同程旅游联合创始人暨现任CTO,张海龙全面负责着同程网一千多人的研发团队管理及同程研发中心的_ctov;

我看不懂,但我大受震撼!-程序员宅基地

文章浏览阅读235次。大家好,我是极客重生,9月开始了,又到了看书的季节。经典的书籍不在乎多,而在乎认真读完,领悟作者(大师)的真谛,经典书,就是值得反复阅读的书,每次阅读都可以获得新的认知!看一看有没有你喜欢..._linux操作系统知识地图2.0 pdf

随便推点

tomcat的classpath设置_tomcat配置classpath-程序员宅基地

文章浏览阅读560次。在tomcat启动的时候,tomcat不会用JDK的classpath,这个是在tomcat启动的catalina.sh里面设置的。如果需要把自己的目录加进去的话,在下面加一句。CLASSPATH:自己的目录。_tomcat配置classpath

DNS主从服务器详细配置_主dns和从dns怎么设置-程序员宅基地

文章浏览阅读517次。DNS域名的分层结构:根域 国家域 顶级域 二级域 主机名DNS解析过程:DNS的解析过程是分层解析的,一般客户机将解析的请求发送给它的DNS服务器,DNS服务器首先是从根DNS服务器开始改进域名解析请求,根将com域的IP反馈给客户机的本地DNS服务器,本地DNS服务器访问com域服务器,com域服务器反馈baidu域的IP给本地DNS服务器,本地DNS服务器访问baidu域服务器询问WWW域服务器的IP,baidu域服务器给DNS服务器反馈www域的ip,这时本地DNS服务器得到www.baid_主dns和从dns怎么设置

栈实现综合计算器(中缀表达式)_栈计算器中缀-程序员宅基地

文章浏览阅读123次。代码实现package com.springboot.数据结构.stack;/** * @author: 牧羊 * @Date: 2020/4/29 15:28 * 栈实现综合计算器(中缀表达式) */public class Calculator { public static void main(String[] args) { String..._栈计算器中缀

Qt-装饰者模式_qt装饰模式-程序员宅基地

文章浏览阅读1.1k次,点赞2次,收藏4次。1. 定义装饰者模式 装饰者模式动态地将责任附加到对象上。若要扩展功能,装饰者提供了比继承更有弹性的替代方案。装饰者和被装饰对象有共同的超类型你可以用一个或多个装饰者包装一个对象。既然装饰者和被装饰对象有相同的类型,所以在任何需要原始对象(被包装)的场合,可以用装饰过的对象代替它。装饰者可以在所委托被装饰者的行为之前与/或之后,加上自己的行为,以达到特定的目的。对象可以在任_qt装饰模式

how2j学习日志——J2EE(2018年3月28日)-程序员宅基地

文章浏览阅读152次。1.开始跟着站长学习J2EE,首页是简单的Tomcat安装和部署,我从官网上下载的是7.0.85版本,修改server.xml中的默认端口号为80。80端口是web服务的默认端口,因此在浏览器上输入127.0.0.1就行了,不需要再输入端口号。2.由于我把之前的继承包WampServer卸载了,因此去官网上重新下载了一个MySql服务器,版本是5.1.38(64位)。选择cu..._howj2ee

面向对象的三大特征_面向对象的三大特性-程序员宅基地

文章浏览阅读9.8k次,点赞5次,收藏37次。面向对象的三大特征——封装、继承、多态_面向对象的三大特性