1、需要到swiper官网中下载swiper.min.js和swiper.min.css
2、在文档的<style></style>标签对中使用link标签引入文件swiper.min.css
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"/>
3、在文档的<body></body>标签最后引入swiper.min.js
<script src="js/swiper-3.4.2.min.js" type="text/javascript" charset="utf-8"></script>
4、在文档的<body></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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</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>
在刚才引入的<script></script>标签下面写一段script代码
<script>
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical',
//控制初始化从哪个开始
initialSlide:0,
loop: true,
autoplay: 3000,
//水平方向
direction:'horizontal',
//切换速度,值越大速度越慢
speed:800,
//拖动或点击之后是否继续轮播false继续轮播，true不继续轮播
autoplayDisableOnInteraction:false,
//拖动时改变鼠标的形状，true改变，false不改变
grabCursor:true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
</script>
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
