zoukankan      html  css  js  c++  java
  • swiper在一个页面多个轮播图

    <script>
        var swiper = new Swiper('.swiper-container1', {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination1',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
    
    <script>
        var swiper2 = new Swiper('.swiper-container2', {
            slidesPerView: 4,
            spaceBetween: 30,
            slidesPerGroup: 4,
            loop: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            loopFillGroupWithBlank: true,
            pagination: {
                el: '.swiper-pagination2',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
    

    注意: 千万不要直接更改swiper-container 应该在后面加上所起的名称

    <div class="swiper-container swiper-container1">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/banner.png" width="100%" 
    
    height="328px"></div>
            <div class="swiper-slide"><img src="img/banner.png" width="100%" 
    
    height="328px"></div>
            <div class="swiper-slide"><img src="img/banner.png" width="100%" 
    
    height="328px"></div>
            <div class="swiper-slide"><img src="img/banner.png" width="100%" 
    
    height="328px"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination1"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    
        <div class="swiper-container swiper-container2">
            <div class="swiper-wrapper">
                <div class="swiper-slide success-item"><img src="img/book3.png"></div>
                <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
                <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
                <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
                <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
                <div class="swiper-slide success-item"><img src="img/book3.png"></div>
                <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
                <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
                <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination swiper-pagination2"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    
  • 相关阅读:
    默认值设置
    关于设置 存储 内部存储空间只显示图片不显示视频的解决方法
    sd卡的监听
    android 设置时间12/24小时制
    详解BMP木马
    C#中类和接口的设计思想(本人认为比较好的思想,欢迎大家讨论指点)
    从XML中读取数据到内存的实例
    如何在代码中通过命令行创建SQL SERVER 数据库
    Visual Studio 2005 新特性 之 可空类型
    install shield11.5 如何制作卸载程序
  • 原文地址:https://www.cnblogs.com/vientiane/p/9938560.html
Copyright © 2011-2022 走看看