banner不能轮播 - - Powered by Discuz!NT Archiver

xuerfu - 2019/5/21 23:38:07

请问banner不能轮播，如何设置？

这是程序的默认设置，该如何修改？谢谢！

附件: QQ图片20190521233048.jpg

xiyou - 2019/5/22 16:17:22

这个轮播插件用法参考：https://www.swiper.com.cn/ 这个网站教程

xuerfu - 2019/5/23 20:54:16

折腾了一晚上，明白了。有相同问题的可参考，并备查：
<script>
        var mySwiper = new Swiper('#banner', {
            //direction: 'vertical', // 垂直切换选项关
            //loop: true, // 循环模式选项. Swiper4无效
            effect: 'fade',//切换效果选择：'slide'（普通切换、默认）,'fade'（淡入）'cube'（方块）'coverflow'（3d流）'flip'（3d翻转）
            //parallax: "true",//开启视差效果，默认：false
            speed: 4000,//切换速度，即两张图片交换的时间

            //是否循环
            autoplay: true,//启动自动切换，并使用默认的切换设置。默认：false
            autoplay: {
                delay: 5000, //自动切换的时间间隔，即图片停留多少时间开始切换
                disableOnInteraction: false, //点击之后轮播是否禁止:默认停止：true：继续：false
            },

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                //clickableClass: 'my-pagination-clickable', //可点击,默认：swiper-pagination-clickable
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
                //el: '.swiper-scrollbar',//添加滑块
            },
        })
</script>

40792391 - 2019/8/12 10:52:02

上一楼的挺特别给力，自己琢磨出来的东西能分享出来真正好，马上去试下！

40792391 - 2019/8/12 11:00:47

按楼上方法搞定，能加个好友么QQ40792391

xxhaishixx - 2020/10/14 20:17:40

回复 3楼xuerfu的帖子

感谢提供，已搞定，谢谢。

ruixuan - 2020/10/29 13:54:23

学习了

shanximuge - 2021/6/4 20:23:12

太感谢了

xiaoqiao001122 - 2023/4/2 16:19:02

回复 1楼xuerfu的帖子

不错，赞一个。

PageAdmin网站内容管理系统(CMS)交流论坛