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,
                },
            });

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

  • 相关阅读:
    P4890 Never·island
    P2617 Dynamic Rankings
    P3243 [HNOI2015]菜肴制作
    P4172 [WC2006]水管局长
    P4219 [BJOI2014]大融合
    P5241 序列
    P1501 [国家集训队]Tree II
    无法读取用户配置文件,系统自动建立Temp临时用户
    组件服务 控制台打不开
    打印服务器 功能地址保护错误
  • 原文地址:https://www.cnblogs.com/rose-1121/p/10710300.html
Copyright © 2011-2022 走看看