Swiper走马灯

 查看演示  website  立即下载

更新时间：2020-05-10 23:28:33

使用方法

css：

img {
	width:100%;
	height:100%;
}
.swiper-container {
	width:43.75rem;
	height:10.125rem;
	margin:0 auto;
}
.swiper-container-free-mode > .swiper-wrapper {
	transition-timing-function:linear;
}

导入js cs

<link rel="stylesheet" type="text/css" href="./css/swiper.css"/>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>

body

<div class="swiper-container" id="case4">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/t1.jpg"></div>
        <div class="swiper-slide"><img src="img/t2.jpg"></div>
        <div class="swiper-slide"><img src="img/t3.jpg"></div>
        <div class="swiper-slide"><img src="img/t4.jpg"></div>
        <div class="swiper-slide"><img src="img/t5.jpg"></div>
        <div class="swiper-slide"><img src="img/t6.jpg"></div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

js：

var swiper = new Swiper('#case4', {
    loop: true, //允许从第一张到最后一张，或者从最后一张到第一张  循环属性
    slidesPerView: 4, // 设置显示三张
    //centeredSlides : true,     //使当前图片居中显示
    freeMode: true, // 使幻灯片滑动时不止滑动一格，且不会自动贴合 
    slidesPerGroup: 1, //定义1张图片为一组
    autoplay: true, //可选选项，自动滑动
    speed: 1000, //设置过度时间
    grabCursor: true, //鼠标样式根据浏览器不同而定 
    autoplay: {
        delay: 1,
        disableOnInteraction: false,
    },
    /*  设置每隔3000毫秒切换 */
    <!-- 分页器 -->
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
    },
});
/* 鼠标悬停 停止动画 */
/* $('.swiper-slide').mouseenter(function () {
    swiper.autoplay.stop();
})
$('.swiper-slide').mouseleave(function () {
    swiper.autoplay.start();
})
*/

PREVIOUS:
NEXT:
手机app数据统计模板
vue-admin-beautiful跨平台前端集成框架(原创)