我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁)
这里我们就可以借助插件来实现这一功能,swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>小米防丢器</title>
<link rel="stylesheet" href="css/swiper-3.3.1.min.css">
</head>
<body>
<section class="swiper-container swiper-container-part5 part5">
<ul class="swiper-wrapper">
<li class="swiper-slide"><img src="img/wallet.jpg" alt=""></li>
<li class="swiper-slide"><img src="img/pet.jpg" alt=""></li>
<li class="swiper-slide"><img src="img/key.jpg" alt=""></li>
<li class="swiper-slide"><img src="img/bag.jpg" alt=""></li>
<li class="swiper-slide"><img src="img/camera.jpg" alt=""></li>
<li class="swiper-slide"><img src="img/computer.jpg" alt=""></li>
</ul>
<!-- Add Pagination -->
<li class="swiper-pagination swiper-part5" id="part5" style="text-align: left;margin-left: 100px;margin-bottom: 25px"></li>
<!-- Add Arrows -->
<l