swipper插件使用

引用相关css，js文件

<script src="lib/swiper/js/swiper.js"></script>
<link rel="stylesheet" href="lib/swiper/css/swiper.css">

html结构
完整的轮播插件包括：
.swiper-container容器：用来放轮播内容，分页器，导航按钮
.swiper-wrapper容器：用来放轮播的内容
.swiper-slide容器：用来放每个轮播元素，这里也可以放置一个img标签（图片轮播）
.swiper-pagination容器：用来放分页器
.swiper-button-prev .swiper-button-next：用来放轮播左右按钮

<style>
/**设置轮播插件外层容器大小**/.kerwin {height: 500px;}
</style><div class="swiper-container kerwin"><div class="swiper-wrapper"><div class="swiper-slide">Slide aaaa</div><div class="swiper-slide">Slide bbbb，</div><div class="swiper-slide">Slide cccc</div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><!-- <div class="swiper-button-prev"></div><div class="swiper-button-next"></div> -->
</div>

swipper插件初始化

//初始化 swiper
new Swiper(".kerwin", {loop: true, //开启循环// direction:"vertical"//垂直轮播// 如果需要分页器pagination: {el: '.swiper-pagination',},slidesPerView: 3,spaceBetween: 30,// 如果需要前进后退按钮// navigation: {//   nextEl: '.swiper-button-next',//   prevEl: '.swiper-button-prev',// },})

当轮播图上的数据来自后台返回，需要注意new Swiper()初始化过早导致轮播图不好用的问题。注意轮播数据加载和轮播插件初始化两者之间的先后顺序

下面是错误样例
先初始化swipper插件，后加载轮播数据

  setTimeout(() => {//ajax成功，加载轮播数据    }, 2000)// 初始化swipper    new Swiper(".kerwin", {loop: true, //开启循环pagination: {el: '.swiper-pagination',}})

正确写法
先加载轮播数据，等轮播数据渲染完页面don后，再初始化swipper插件(此方法不适用于vue，因为在vue的设计思想是数据驱动dom，得到轮播数据后赋值给一个状态，页面dom并不会及时立马更新，状态改变会通知监听，只有在组件生命周期的updated里面才是页面渲染完毕。vue下的写法请看下一篇)

  setTimeout(() => {//ajax成功，加载轮播数据//使用轮播数据更新页面dom节点// 初始化swipper    new Swiper(".kerwin", {loop: true, //开启循环pagination: {el: '.swiper-pagination',}})  }, 2000)

swipper插件使用相关推荐

实现图片点击放大预览效果
前因在开发微信公众号时,产品经理要求实现图片可以点击放大,并且点击下一张的效果.因为是第一次做公众号的项目,也是第一次在移动端要做图片预览的效果,所以在网上查了相关资料. 实现路程首先,在以往的项 ...
阅读分析程序源代码的一些方法（转载整理）
前言最近项目组中有较多新成员需要阅读熟悉项目中已有的程序代码,好多成员一时间对项目代码摸不清头绪,这里在网络上收集了相关源代码阅读分析的一些方法,整理于此. 正文摘自(繁体中文Traditiona ...
Swipper.js实现轮播功能
我是歌谣放弃很难但是坚持一定很酷微信公众号关注小歌谣今天我们来说一下工作中的一个小需求就是给我们的页面去实现一个轮播的功能最近需要实现一个小的需求就是如何类似于如何把一个图片变成一个轮播 ...
Alibaba代码规范插件、FindBugs插件安装及详解，IDEA插件安装，代码规范，代码查错，代码格式规范
这是帮助开发者规范代码,培养优良的编码习惯的两个IDEA插件
IDEA的Docker插件实战(Dockerfile篇)
IDEA的Docker插件实战(Dockerfile篇) IntelliJ IDEA的Docker插件能帮助我们将当前工程制作成Docker镜像.运行在指定的远程机器上,是学习和开发阶段的好帮手,本文 ...
IDEA集成Docker插件实现一键自动打包部署微服务项目
一. 前言大家在自己玩微服务项目的时候,动辄十几个服务,每次修改逐一部署繁琐不说也会浪费越来越多时间,所以本篇整理通过一次性配置实现一键部署微服务,实现真正所谓的一劳永逸. 二. 配置服务器 1. ...
vue-devTools插件安装流程
vue-devTools插件安装流程本文主要介绍 vue的调试工具 vue-devtools 的安装和使用工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 ...
VS Code 安装 Go 插件、自定义扩展配置、断点调试
1. 安装插件使用快捷键 Ctrl+Shift+X 打开插件安装页面,安装 Go 插件. 2. 自定义扩展配置使用快捷键 Ctrl+, 打开自定义配置页,编辑 settings.json ,定义与 ...
VS Code 安装插件、自定义模板、自定义配置参数、自定义主题、配置参数说明、常用的扩展插件
1. 下载和官网教程下载地址:https://code.visualstudio.com/ 官方教程:https://code.visualstudio.com/docs 2. 安装插件安装扩展插 ...

swipper插件使用

swipper插件使用相关推荐

最新文章

热门文章