vue和superslide使用,轮播失效问题
最近在仿做一个网站,有几个轮播图是基于superslide实现的,纯HTML是没问题,但是使用vue就发现轮播图全部失效,无法轮播。
最后看了一段代码,得到启发:
1 $(document).ready(function(e) {
2 $(".banner").slide({
3 mainCell:".bd ul",
4 titCell:'.hd ul',
5 autoPlay:true,
6 autoPage:true,
7 effect:"topLoop",
8 easing:"easeOutCirc"
9 });
10 });
在页面加载完成后再调用superslide相关函数
想到vue组件的生命周期,与$(document).ready相符合的是mounted方法
在组件中添加mounted方法,里面调用superslide相关函数
mounted:function () {
$(".banner").slide({
mainCell:".bd ul",
titCell:'.hd ul',
autoPlay:true,
autoPage:true,
effect:"topLoop",
easing:"easeOutCirc"
});
}
轮播生效,问题解决,放在created方法里是不行的
vue和superslide使用,轮播失效问题的更多相关文章
- Vue和SuperSlide做轮播效果
使用这个插件做轮播需要的js应该知道,就是vue.js和jquery.SuperSlide.2.1.1.js 下载地址: vue:https://vuejs.org/js/vue.js 这里直接Ctr ...
- 后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件
后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 ...
- vue中使用swiper-slide时,循环轮播失效?
前言 vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了??? 正文 代码如下: <swiper :op ...
- vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
- vue手写的轮播图片,解决已经修改data中的值,页面标签已绑定,但页面没效果
1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...
- Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
- 在 vue 中用 transition 实现轮播效果
概述 今天我接到一个需求:轮播效果.本来我是打算使用 Swiper 实现的,但是想起来貌似 transition 也能实现.于是就试了下,真的可以,还挺简单的,于是就记录下来,供以后开发时参考,相信对 ...
- vue上的简单轮播图
好久没写轮播图了,今天在vue上写了个超简单的,效果还ok. .moveLeft{position:relative;right:ZOOMpx;transition:all 1s;} 原理是滚动时利用 ...
- vue渐变淡入淡出轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VUE开发一个图片轮播的组件
完成效果图如下: vue开发的思路主要是数据绑定,代码如下: <template> <div ref="root" style="user-select ...
随机推荐
- odoo面试问题总结
基础问题: Model和TransientModel区别是什么?什么场景下应该使用TransientModel? 字段的compute属性是用来做什么的?如何将包含compute属性的字段的值存储到数 ...
- 深入理解Nginx-模块开发与架构解析(第2版)流程梳理
1.Nginx HTTP模块调用的简化流程 Nginx HTTP模块调用的简化流程图如上: 1.worker进程会循环调用事件模块检测网络事件 2. 当事件模块检测到客户端发起TCP请求时,即收到SY ...
- 关于python的一些学习笔记
一种是利用三引号的方法.三引号下默认允许自动换行,第二种就是在文字之间插入\n这种方式(使用转义字符) 这里是关于转义字符的一些总结. 2.关于运算符号 小学除法取余%,中学开n方**,小学除法取整/ ...
- Java线程池详解:高效并发编程的核心利器
Java线程池详解:高效并发编程的核心利器 在高并发的Java应用中,频繁创建和销毁线程是非常消耗系统资源的操作.线程池作为Java并发编程的核心组件,不仅能够复用线程.降低系统开销,还能有效控制并发 ...
- 数据安全新战场,EasyMR为企业筑起“安全防线”
2020年1月,时间跨度长达14年的,微软2.5亿条客户服务和支持记录在网上泄露: 同年4月,微盟发生史上最贵"删库跑路"事件,造成微盟市值一夜之间缩水约24亿港币: 今年7月,网 ...
- C# 通过正则表达式保留指定的字符串信息
string ddd = "萨芬啊手动阀 asdfas--_asd fasf \r\n,ss,s.s.s'dd'd·d`d%%##"; var dss = Regex.Repl ...
- C# 组合键 判断,文本框不接受纯回车enter
//TextBox 必须是多行文本框 private void Txt_Billcode_KeyDown(object sender, KeyEventArgs e) { if (e.Control ...
- 学习spring cloud记录5-Ribbon负载均衡
前言 在上次记录中,后台调用的http://demo-user/demouser/user/test并不是一个直接可用的地址,Ribbon将其拦截拉取eureka的服务列表,然后选择其中一个地址进行请 ...
- vuePress2.x 多页面 多目录生成方案
前言 因为官网介绍的都只有一个'一级标题' 只有一个markdown文件 最终编译后也只有一个html文件,类似于spa 单页项目 如何才有多页项目呢 百度查询 网上插件库有很多,大部分不能用, 后来 ...
- aegis-dev-tools的使用
前言aegis-dev-tools是一个辅助开发前端的工具包,用于根据后端接口文档生成前端封装api请求. 创建后端项目要求使用swagger,且controler书写规范,输入输出类型,备注都要 合 ...