swiper | 易学教程

swiper文字垂直滚动（公告栏）

阅读更多关于 swiper文字垂直滚动（公告栏）

<!DOCTYPE html> <html lang = "en" > <head> <meta charset = "utf-8" > <title> 文字垂直滚动 </title> <meta name = "viewport" content = "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" >  <link rel = "stylesheet" href = "swiper/css/swiper.min.css" >  <style> html , body { position : relative ; height : 100 %; } body { background : #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } /* 公告滚动 */ . notice - swiper { position : relative ; width : 600px ; height : auto ;

swiper与SUI框架轮播图冲突解决

阅读更多关于 swiper与SUI框架轮播图冲突解决

swiper与SUI框架轮播图冲突解决代码 <!DOCTYPE html> < html > < head > < meta charset = " utf-8 " > < meta http-equiv = " X-UA-Compatible " content = " IE=edge " > < title > 我的生活 </ title > < meta name = " viewport " content = " initial-scale=1, maximum-scale=1 " > < link rel = " shortcut icon " href = " /favicon.ico " > < meta name = " apple-mobile-web-app-capable " content = " yes " > < meta name = " apple-mobile-web-app-status-bar-style " content = " black " > < link rel = " stylesheet " href = " //g.alicdn.com/msui/sm/0.6.2/css/sm.min.css " > < link rel = " stylesheet " href = " //g.alicdn.com/msui/sm/0

swiper缩略图active切换失灵的解决思路

阅读更多关于 swiper缩略图active切换失灵的解决思路

报错信息：Cannot read property ‘indexOf’ of undefined swiper。来源是swiper.min.js，首先检查自己写的js配置是否有误，没有就调试插件源代码，需要用非压缩版的js文件调试。打开插件源码的头注释，查看插件的官网，在官网里找到对应的github仓库。在issues查找第一步的报错信息的相关bug记录，查看别人的问题是否与自己的一致。如果发现问题已关闭，就找修复该问题的提交的代码修改查看自己所用的插件版本和官网最新的版本是否一致，如果官网已经更新最新，且最新含有本次的修复，则用官网的最新版本替换本地插件，这次发现官方的最新版本master分支没有更新这次的修改，则把第四步的修改同步到本地的压缩swiper.min.js文件，用关键字定位代码bug处，变量用混淆的a，空格删除。保存压缩文件再测试修复情况，同时把最新的这个文件替换其他项目的swiper.min.js文件。来源：博客园作者：巧丽链接：https://www.cnblogs.com/gduf/p/11463102.html

swiper动态渲染部分功能失效

阅读更多关于 swiper动态渲染部分功能失效

swiper-slide功能失效：在开发移动端页面时，经常用到swiper插件。swiper-slide的数据基本都是通过动态渲染出来的，但是这时候就会有问题，会发现左右切换按钮和滑动切换都会失效。这个是因为ajax请求数据是个异步操作，当页面渲染完毕时，swiper插件没法获取最新的swiper-slide个数，就导致了部分功能失效。查看官方文档找到解决方法：在swiper初始化的时候设置下面的属性 observer: true, //修改swiper自己或子元素时，自动初始化swiper observeParents: true //修改swiper的父元素时，自动初始化swiper 例如： var mySwiper = new Swiper ( '.swiper-container1' , { observer : true , //修改swiper自己或子元素时，自动初始化swiper observeParents : true , //修改swiper的父元素时，自动初始化swiper loop : true , // 循环模式选项 // 如果需要前进后退按钮 navigation : { nextEl : '.swiper-button-next' , prevEl : '.swiper-button-prev' , } }) 来源：51CTO 作者：

react 引入swiper

阅读更多关于 react 引入swiper

npm install --save swiper 应用模块引入import 'swiper/dist/css/swiper.min.css' import Swiper from 'swiper'

swiper属性

阅读更多关于 swiper属性

var swiper = new Swiper('.swiper-container', { direction: 'horizontal', //默认是横向，可以设置竖向vertical Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。 history: 'love', //开始浏览器前进后退没什么用 data:1, pagination: '.swiper-pagination', //分页器 paginationClickable :true, // 分液器换图 loop:true, //无限循环 nextButton: '.swiper-button-next',//前进后退按钮 prevButton: '.swiper-button-prev', autoplay: 1000, // 自动轮播 initialSlide :1, // 初始化跳到第几个轮播图 speed:800, // 运动缓慢 autoplayDisableOnInteraction : true, //停止自动轮播 grabCursor : true, //抓手形状 parallax : true, //如需要开启视差效果（相对父元素移动），设置为true并在所需要的元素上增加data- swiper-parallax属性。 hashnav:true, //

微信小程序 swiper 组件坑

阅读更多关于微信小程序 swiper 组件坑

swiper 组件高度被限制为150px了，所以内容无法撑开。解决办法给这组件重新设置个高度，然后在把里面的图片设置为自动适应容器大小。图片模式设置为宽度不变自动适应高度 <swiper class="test" .....> <swiper-item> <image mode='widthFix' ...... /> </swiper-item> </swiper> <style>.text{　　height:200px;} image{ width:100%; height:auto; } </style> 文章来源: 微信小程序 swiper 组件坑

Swiper实现轮播图效果

阅读更多关于 Swiper实现轮播图效果

为了实现轮播图（carousel）效果或左右滑动显示不同的内容，我们采用Swiper来实现。需要引入swiper.min.css和swiper.min.js，文件可从 https://github.com/LuoYiHao/front-end-lib/tree/master/swiper 下载。示例HTML代码： 1 <div class="swiper-container" id="carousel"> 2 <div class="swiper-wrapper"> 3 <div class="swiper-slide"> 4 <img src="../../images/1.jpg" class="banner"/> 5 </div> 6 <div class="swiper-slide"> 7 <img src="../../images/2.jpg" class="banner" /> 8 </div> 9 <div class="swiper-slide"> 10 <img src="../../images/3.jpg" class="banner" /> 11 </div> 12 </div> 13 </div> 示例JS代码： 1 var mySwiper = new Swiper('#carousel', { 2 autoplay:true, 3 loop:

解决tab切换的时候，swiper不生效

阅读更多关于解决tab切换的时候，swiper不生效

observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swiper 页面使用tab切换后，swiper不会自动轮播，而且只显示一张图片，最后无奈只能各种百度，在CSDN上面看到有人加了这两个属性，所以试了一下，瞬间好使！附上博客地址：https://blog.csdn.net/sunny_desmond/article/details/62044469?utm_source=blogxgwz0 来源： https://www.cnblogs.com/zhangjianzhen/p/11758795.html

微信小程序之swiper组件显示上传多张图片，点击删除图片后其余图片不显示问题（空白），但图片地址可以审查到

阅读更多关于微信小程序之swiper组件显示上传多张图片，点击删除图片后其余图片不显示问题（空白），但图片地址可以审查到

这个不知道是不是微信小程序官方的问题，简单描述一下遇到的问题：在使用swiper组件来预览显示用户上传的多张图片后，右上角有一个可以删除图片的按钮，用户可以点击删除符号删除上传的图片。重点是顺时针点击删除图片和删除中间的指定图片，都其余图片显示没问题。唯独删除最后一张图片，问题就来了，排序前面的图片显示不出来（空白）；但是可以查到图片组件还有图片地址的？？？（真机环境也测试过，问题效果是一样的）（一）问题详情 1、问题效果图：上传了三张图片，通过swiper组件显示出来，右上角的是删除符号操作，右边中间数字是当前索引值；首先是点击删除第一张图片，后面图片正常显示并将第二张图片归为第一张，索引值也变为0；（三张图片变为两张）再次点击删除的是两张图片中的第二张（索引值为1的），结果剩下显示的一张图片，为空白，查了图片地址显示没问题；如图：（二）问题分析通过网上找资料和尝试排错，原来是小程序组件的属性这个问题导致的。因为使用的是swiper组件，会有一个属性： current 表示当前所在滑块的 index值，默认为0，类型为Number；也就是说，当你删除图片的时候， current 不会改变，就是说：本来有三张图片的图片数组，默认显示第一张的话， current='0' ；当删除第一张图片后，图片数组会发生变化，但 current='0' 是不变的

订阅 swiper