初始化
<!DOCTYPE html><html>
<head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="swiper.css?1.1.11"/> <style> .swiper-container { width: 600px; height: 300px; }
.swiper-slide{ font-size: 50px } .swiper-slide:nth-of-type(1){ background-color: cornflowerblue; } .swiper-slide:nth-of-type(2){ background-color: coral; } .swiper-slide:nth-of-type(3){ background-color: yellowgreen; } </style>
</head>
<body> <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之外--> <script src="swiper.js?1.1.11"></script> <script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',// loop: true,// // // 如果需要分页器 pagination: '.swiper-pagination',// // // 如果需要前进后退按钮 nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',// // // 如果需要滚动条 scrollbar: '.swiper-scrollbar',
})</script>
</body></html>
查看更多关于一个简单实用的js插件--Swiper的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did40791