美文网首页
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