美文网首页
swiper 参数详解

swiper 参数详解

作者: 阿龙哟 | 来源:发表于2018-11-20 18:54 被阅读0次
    <div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                    ...
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
    
                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
    
                <!-- If we need scrollbar -->
                <div class="swiper-scrollbar"></div>
            </div>
    
    var mySwiper = new Swiper('.swiper-container', {
                // Optional parameters
                direction: 'vertical'   方向垂直
                loop: true, 是否是无缝轮播
    
                // If we need pagination
                pagination: {
                    el: '.swiper-pagination',  是否需要分页器,就是小点
                },
    
                // Navigation arrows  
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',  是否需要箭头
                },
    
                // And if we need scrollbar  
                scrollbar: {
                    el: '.swiper-scrollbar',是否需要滚动条
                },
            })
    

    相关文章

      网友评论

          本文标题:swiper 参数详解

          本文链接:https://www.haomeiwen.com/subject/hzmptqtx.html