京东轮播图
- 以下轮播图等等都可以用Swiper解决
Swiper讲解
Swiper5 使用方法
- 首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="dist/css/swiper.min.css">
</head>
<body>
...
<script src="dist/js/swiper.min.js"></script>
...
</body>
</html>
- HTML内容
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外
- 你可能想要给Swiper定义一个大小，当然不要也行。
.swiper-container {
width: 600px;
height: 300px;
}
- 初始化Swiper：最好是挨着</body>标签
...
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
//不需要的模块可以删除
</script>
</body>
- 或者创建一个专门写轮播图代码的js，：最好是挨着</body>标签
<script src="./js/lunbotu.js"></script>
</body>
- 完成。恭喜你，现在你的Swiper应该已经能正常切换了。
Swiper插件相关配置选项
垂直切换选项
- direction: ‘vertical’, // 垂直切换选项
默认horizontal
可设置水平(horizontal)或垂直(vertical)。
循环模式选项
- loop: true, // 循环模式选项
默认false;
设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。
自动轮播
-autoplay 默认：false
- 第一种：autoplay: true, //等同于以下设置
- 第二种： autoplay: {
delay: 3000,
//3秒轮播一次
stopOnLastSlide: false,
disableOnInteraction: false,
// 触碰后自动切换也不会停止
}, - disableOnInteraction 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
slide切换效果
<div class=“swiper-slide”>Slide 1
<div class=“swiper-slide”>Slide 2
<div class=“swiper-slide”>Slide 3
- slide的切换效果，默认为"slide"（位移切换），可设置为’slide’（普通切换、默认）,“fade”（淡入）“cube”（方块）“coverflow”（3d流）“flip”（3d翻转）。
- 京东图片-SW1中图片切换是淡入淡出
// 淡入淡出
effect: 'fade',
fadeEffect: {
crossFade: true,
},
分页器点击切换和滑上切换
Swiper点击分页器切换slide
<div class=“swiper-slide”>Slide 1
<div class=“swiper-slide”>Slide 2
<div class=“swiper-slide”>Slide 3
- 分页器变为点击切换，加一段下面JS
- clickableClass 可点击的pagination的类名。
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable: true,
clickableClass: 'my-pagination-clickable',
},
Swiper点击分页器切换slide改成滑上切换
- 分页器由点击切换改成滑上切换，加一段下面JS
//滑上分页器小圆点span
$(".swiper-pagination .swiper-pagination-bullet").hover(function () {
$(this).click(); //鼠标划上去之后，自动触发点击事件来模仿鼠标划上去的事件
})
更改轮播图CSS样式
- 例子
- html
- less
- html
一个页面设置多个轮播图
- html中，只需要给不同轮播图的html代码加不同id
- JS中，只需要把每一个的第一个参数，换成你自定义每一个轮播图的id就好
京东轮播图-Swiper代码
Sw1
<!-- swiper1-->
<div class="swiper-container" id="sw1">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./images/banner2.jpg" alt=""></div>
<div class="swiper-slide"><img src="./images/banner3.jpg" alt=""></div>
<div class="swiper-slide"><img src="./images/banner2.jpg" alt=""></div>
<div class="swiper-slide"><img src="./images/banner4.jpg" alt=""></div>
<div class="swiper-slide"><img src="./images/banner5.jpg" alt=""></div>
<div class="swiper-slide"><img src="./images/banner6.jpg" alt=""></div>
<div class="swiper-slide"><img src="./images/banner7.jpg" alt=""></div>
<div class="swiper-slide"><img src="./images/banner8.jpg" alt=""></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
// SW1 中
var mySwiper1 = new Swiper('#sw1', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
// autoplay: true, //等同于以下设置
autoplay: {
delay: 3000,
stopOnLastSlide: false,
// 触碰后自动切换也不会停止
disableOnInteraction: false,
},
// 淡入淡出
effect: 'fade',
fadeEffect: {
crossFade: true,
},
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable: true,
clickableClass: 'my-pagination-clickable',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// // 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
Sw2
<div class="swiper-container" id="sw2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:;">
<img src="./images/sw21.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./images/sw22.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./images/sw23.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<img src="./images/sw22.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./images/sw23.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./images/sw21.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<img src="./images/sw23.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./images/sw21.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./images/sw22.jpg" alt="">
</a>
</div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
var mySwiper2 = new Swiper('#sw2', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
// autoplay: true, //等同于以下设置
autoplay: {
delay: 3000,
stopOnLastSlide: false,
// 触碰后自动切换也不会停止
disableOnInteraction: false,
},
// 淡入淡出
effect: 'fade',
fadeEffect: {
crossFade: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
API文档
