移动端 轮播插件 swiper.js

链接 swiper.js

项目中广泛用到,所以贴出来,自己遇到了坑点,先贴出

        <!-- 消息轮播 -->
        <div id="msg_container" class="msg-container">
            <div class="msg-swiper">
                <ul class="j-msg-wrap msg-wrap swiper-wrapper">
                    <!-- 插入文字 -->
                    <li class="swiper-slide"><p>你使用你使用的芒果你使用你使用的芒果尚你使用你使用的芒果尚尚用的1</p></li>
                    <li class="swiper-slide"><p>你使用的芒果尚未填写心得2</p></li>
                    <li class="swiper-slide"><p>你使用的芒果尚未填写心得3</p></li>
                    <li class="swiper-slide"><p>你使用的芒果尚未填写心得4</p></li>
                </ul>
            </div>
        </div>
    var mySwiper1 = new Swiper ('.msg-swiper', {
        autoplay: 2800,
        loop: true
      });

跟官网写的一样简单,只要类名 一个是 swipe-slide、swiper-wrapper.这两个必须要,不然动不起来

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容