zoukankan      html  css  js  c++  java
  • 多组图自动无限循环(swiper轮播)

    前两天的一个项目中遇到多组图片无限轮播,当时采用了swiper 但是没有解决让它无限轮播。今天再次尝试了一下发现是自己的样式写错了。今天在这里写一下,为了给自己一个警醒不要犯同样的错误

    首先先引入一下swiper的css文件和js文件

    <link rel="stylesheet" type="text/css" href="../swiper-4.5.0/dist/css/swiper.min.css" />
    <script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" src="../swiper-4.5.0/dist/js/swiper.min.js"></script>
    
    

    之后再HTML中写入轮播的

    <div class="tupian swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="tupianimg">
                                <img src="../img/img/lunbo1.png" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="tupianimg">
                                <img src="../img/img/lunbo2.png" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="tupianimg">
                                <img src="../img/img/lunbo3.png" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="tupianimg">
                                <img src="../img/img/lunbo4.png" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="tupianimg">
                                <img src="../img/img/lunbo5.png" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="tupianimg">
                                <img src="../img/img/lunbo1.png" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="tupianimg">
                                <img src="../img/img/lunbo2.png" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="tupianimg">
                                <img src="../img/img/lunbo3.png" />
                            </div>
                        </div>
                    </div>
                </div>

    css样式

                .container {
                    width: 100%;
                }
                .container .tupian {
                    margin-top: 19px;
                    height: 200px;
                }
                .swiper-container {
                    width: 900px;
                    margin: 0 auto;
                    height: 200px;
                }
                .container .tupian .swiper-slide {
                    width: 300px;
                    height: 200px;
                }
                
                .container .tupian .tupianimg {
                    width: 100%;
                    height: 200px;
                    position: relative;
                }
                
                .container .tupian .tupianimg img {
                    width: 100%;
                    height: 200px;
                }

    script

            var swiper = new Swiper('.swiper-container', {         
         spaceBetween: 20,
          loop: true,
        slidesPerView: 'auto',
        loopedSlides: 5,
                autoplay: {
                    delay: 1500,
                    disableOnInteraction: false,
                },
            });

    这样就可以完成自动无限轮播 

  • 相关阅读:
    笔记:C/C++字符函数的使用
    学习游戏基础编程3:地图编辑器
    学习游戏基础编程2:Win32分割窗口
    学习游戏基础编程1:Win32自定义控件
    [WebServer] Tomcat 配置访问限制:访问白名单和访问黑名单
    [WebServer] Windows操作系统下 Tomcat 服务器运行 PHP 的环境配置
    XSLT函数集合:数值函数、字符串函、节点集函数和布尔函数
    腾讯的一道JavaScript面试题
    【转】AES 进一步的研究
    MQTT-Client-FrameWork使用整理
  • 原文地址:https://www.cnblogs.com/rose-1121/p/10710300.html
Copyright © 2011-2022 走看看