swiper自动轮播可滑动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="swiper-3.4.2.min.css">
</head>
<body>
<div class="swiper-container swiper-container-horizontal">
    <div class="swiper-wrapper" style="transform: translate3d(-2220px, 0px, 0px); transition-duration: 0ms;">
        <div class="swiper-slide" style="width: 1080px; margin-right: 30px;"><img src="img/dog.jpg" alt=""></div>
        <div class="swiper-slide swiper-slide-prev" style="width: 1080px; margin-right: 30px;"><img src="img/lol.png" alt=""></div>
        <div class="swiper-slide swiper-slide-active" style="width: 1080px; margin-right: 30px;"><img src="img/qier.png" alt=""></div>
        <div class="swiper-slide swiper-slide-next" style="width: 1080px; margin-right: 30px;">Slide 4</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
</body>
<script src="jquery-1.12.4.js"></script>
<script src="swiper-3.4.2.jquery.min.js"></script>
<script>


    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });


</script>


</html>
阅读更多
换一批

没有更多推荐了,返回首页