swiper_4 的使用

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/swiper.css"/>
        <style type="text/css">
            .swiper-container {
                width: 800px;
                height:400px;
            }
            img{
                width: 100%;
                height:100%;
            }
        </style>
    </head>

    <body>
        <div class="swiper-container">
            <!--<div class="swiper-scrollbar"></div>-->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-wrapper">
                <div class="swiper-slide"><div class="swiper-zoom-container"><img src="img/code-wallpaper-16.jpg"/> </div></div>
                <div class="swiper-slide"><div class="swiper-zoom-container"><img src="img/code-wallpaper-18.png"  /> </div></div>
                <div class="swiper-slide"><div class="swiper-zoom-container"><img src="img/code-wallpaper-22.jpg" /></div></div>
                <div class="swiper-slide"><div class="swiper-zoom-container"><img src="img/code-wallpaper-8.jpg" /></div> </div>
                <div class="swiper-slide"><div class="swiper-zoom-container"><img src="img/code_by_rasmusir-d4a4dj2.jpg"/></div> </div>
                <div class="swiper-slide"><div class="swiper-zoom-container"><img src="img/maxresdefault.jpg" /></div> </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <script type="text/javascript" src="js/swiper.min.js"></script>
        <script>
            var swiper = new Swiper({
            el: '.swiper-container',
            //slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
//          effect: 'coverflow',
            //开启焦距功能
            zoom:true,
            loop:true,
            //初始化显示哪个滑块，从0开始
            initialSlide:0,
            //slide之间的距离（单位px）
            spaceBetween: 5,
            //每页显示多少个图片
            slidesPerView: 3,
            //设定为true时，活动块会居中，而不是默认状态下的居左,(carousel模式)
            centeredSlides: false,
            //设置为true则点击slide会过渡到这个slide
            slideToClickedSlide: true,
            //变手
            grabCursor: true,
            //多行布局里面每列的slide数量。
//          slidesPerColumn: 2,
            //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合
//          freeMode:true,
            //添加滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
            //开启鼠标滚轮翻页
            mousewheel: {
              enabled: true,
            },
            //开启键盘翻页
            keyboard: {
              enabled: true,
            },
            //添加分页导航
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
            },
            //前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            autoplay: {
                delay: 3000,
                //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
                        //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
                        //操作包括触碰，拖动，点击pagination等。
                disableOnInteraction: false,
             },
        });
        </script>
    </body>

</html>
猜你喜欢
