swiper应用demo及鼠标滑过悬停离开滚动方法

来源：互联网发布：中国网络经纪人安居客编辑：程序博客网时间：2024/05/18 02:03

首先引入swiper样式及css

<!-- Link Swiper's CSS -->

<!-- Swiper JS --><script src="../dist/js/swiper.min.js"></script>

然后设置基础样式

.swiper-container {    width: 500px;    height: 300px;    margin: 20px auto;}.swiper-slide {    text-align: center;    font-size: 18px;    background: #fff;       /* Center slide text vertically */    display: -webkit-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    -webkit-box-pack: center;    -ms-flex-pack: center;    -webkit-justify-content: center;    justify-content: center;    -webkit-box-align: center;    -ms-flex-align: center;    -webkit-align-items: center;    align-items: center;}

        最后初始化一下swiper

<script>    var mySwiper = new Swiper('.container', {        autoplay: 2500 //自动轮播    });</script>

鼠标悬停及鼠标离开开启轮播

$(".container").mouseenter(function () {//滑过悬停    mySwiper.stopAutoplay();//mySwiper 为上面你swiper实例化的名称}).mouseleave(function(){//离开开启    mySwiper.startAutoplay();});

详情请看SWIPER官网

0 0