Swiper详解编程语言

Swiper学习总结：

swiper是用来实现图文滚动插件

一、支持移动端swiper3

    1、引用插件

         <link rel=”stylesheet” href=”path/to/swiper.min.css”>

         <script src=”path/to/swiper.min.js”></script>

    2、HTML内容

        <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>

            <!– 如果需要分页器 –>

            <div class=”swiper-pagination”></div>

            

            <!– 如果需要导航按钮 –>

            <div class=”swiper-button-prev”></div>

            <div class=”swiper-button-next”></div>

            

            <!– 如果需要滚动条 –>

            <div class=”swiper-scrollbar”></div>

        </div>

    3、初始化js

        <script>        

            var mySwiper = new Swiper (‘.swiper-container’, {

                direction: ‘vertical’, // 滚动方向，默认为horizontal

                loop: true, //滚动状态

                autoplay : 5000,  //自动切换,单位ms

        

                // 如果需要分页器

                pagination: ‘.swiper-pagination’,

                

                // 如果需要前进后退按钮

                nextButton: ‘.swiper-button-next’,

                prevButton: ‘.swiper-button-prev’,

                

                // 如果需要滚动条

                scrollbar: ‘.swiper-scrollbar’,

          })        

        </script>

    4、如果需要前进后退按钮放在外面，直接放在swiper-container外面即可

二、支持IE8等swiper2用法

    （1）原点模式

        1、引用swiper2插件

            <link rel=”stylesheet” href=”../css/idangerous.swiper.css” />

            <script type=”text/javascript” src=”../js/idangerous.swiper.min.js”></script>

        2、HTML内容

            <div class=”titlePic”>

                <div class=”swiper-container”>

                    <div class=”swiper-wrapper”>

                        <div class=”swiper-slide”>

                            <img src=”../img/hotel/hotel_banner.png” />

                        </div>

                        <div class=”swiper-slide”>

                            <img src=”../img/hotel/hotel_banner.png” />

                        </div>

                        <div class=”swiper-slide”>

                            <img src=”../img/hotel/hotel_banner.png” />

                        </div>

                    </div>

                    <!– 分页器 –>

                    <div class=”pagination”></div>

                </div>

            </div>

        3、初始化js

            var mySwiper = new Swiper(‘.titlePic .swiper-container’, {

                loop: true,

                pagination: ‘.pagination’,

            })

        4、自定义css样式

        .titlePic{

            margin: 0 auto;

            height: 418px;

            position: relative;

            width: 100%;

        }

        .titlePic .swiper-container{

            width: 100%;

            height: 418px;

        }

        .titlePic img{

            height: 418px;

            width: 100%;

        }    

        .titlePic .swiper-container .pagination {

            margin-left: 0;

            position: absolute;

            top: 350px;

            left: 0;

            z-index: 20;

            bottom: 10px;

            width: 100%;

            text-align: center;

        }

        .titlePic .swiper-pagination-switch {

            display: inline-block;

            width: 11px;

            height: 11px;

            border-radius: 11px;

            background: #CCD7DD;

            margin: 0 5px;

            opacity: 0.8;

            border: 1px solid white;

            cursor: pointer;

        }

        .titlePic .swiper-active-switch {

            background: #FF7604;

        }

        

    （2）前进后退按钮模式

        1、引用swiper2插件

            <link rel=”stylesheet” href=”../css/idangerous.swiper.css” />

            <script type=”text/javascript” src=”../js/idangerous.swiper.min.js”></script>

        2、HTML内容

            <div class=”container partner”>

                <h3>合作品牌</h3>

                <!–前进后退按钮–>

                <div class=”arrow-left”>

                    <a  href=”javscript:;”><img  src=”../img/hotel/left.png”/></a>

                </div>

                <div class=”arrow-right” >

                    <a  href=”javscript:;”><img src=”../img/hotel/right.png”/></a>

                </div>

                    <!–内容图片–>

                    <div class=”swiper-container”>

                        <div class=”swiper-wrapper”>

                            <div class=”swiper-slide”>

                                <img src=”../img/hotel/board1.png” />

                            </div>

                            <div class=”swiper-slide”>

                                <img src=”../img/hotel/board1.png” />

                            </div>

                            <div class=”swiper-slide”>

                                <img src=”../img/hotel/board1.png” />

                            </div>

                            <div class=”swiper-slide”>

                                <img src=”../img/hotel/board1.png” />

                            </div>

                        </div>

                    </div>

            </div>

        3、初始化js

            var mySwiper = new Swiper(‘.partner .swiper-container’, {

                nextButton: ‘.swiper-button-next’,

                prevButton: ‘.swiper-button-prev’,

                parallax: true, //设置动画效果

                slidesPerView: 3,//设置显示图片个数

                spaceBetween: 16 //设置间隔

            })

            //设置前进后退按钮点击事件

            $(‘.arrow-left’).on(‘click’, function(e) {

                e.preventDefault()

                mySwiper.swipePrev()

            })

            $(‘.arrow-right’).on(‘click’, function(e) {

                e.preventDefault()

                mySwiper.swipeNext()

            })    

        4、自定义css样式

            /*swiper容器设置*/

            .partner .swiper-container {

                margin-top: 50px;

                width: 93%;

            }

            /*前进后退按钮设置*/

            .partner .arrow-left {

                position: absolute;

                top: 50%;

                padding-left: 0;

                width: 2%;

                z-index: 99;

                

            }

            .arrow-left img{

                margin-left: 0;

                width: 100%;

                height: 30px;

            }

            .partner .arrow-right {

                position: absolute;

                padding-right: 0;

                top: 50%;

                left: 98%;

                width: 2%;

                float: right;

                z-index: 99;

            }

            .arrow-right img{

                width:100%;

                height: 30px;

            }

            /*内容图片设置*/

            .partner .swiper-slide img {

                width: 90%;

                padding: 15%;

                height: 123px;

                border: 1px solid #999999;

            }