zoukankan      html  css  js  c++  java
  • 一个页面使用多个相同Swiper轮播效果怎么写会不冲突

    主要看你的轮播是怎么写的,一般用ID区分就行了

    以常用的轮播插件Swiper为例

    <!--下载插件http://www.swiper.com.cn/download/-->
    <!--引入插件-->
    <link rel="stylesheet" href="path/to/swiper.min.css">
    <script src="path/to/swiper.min.js"></script>
    <!--HTML-->
    <div class="swiper-container" id="swiper1"><!--第一个轮播-->
        <div class="swiper-wrapper">
            <div class="swiper-slide">图1</div>
            <div class="swiper-slide">图2</div>
            <div class="swiper-slide">图3</div>
        </div>
     </div>
     <div class="swiper-container" id="swiper2"><!--第二个轮播-->
        <div class="swiper-wrapper">
            <div class="swiper-slide">图4</div>
            <div class="swiper-slide">图5</div>
            <div class="swiper-slide">图6</div>
        </div>
     </div>
     <!--JS-->
    <script>       
      var mySwiper1 = new Swiper ('#swiper1');    //第一个轮播   
      var mySwiper2 = new Swiper ('#swiper2');    //第二个轮播   
    </script>
  • 相关阅读:
    leetcode-String to Integer (atoi)
    2014薪水
    Ubunt下的软件集
    ubuntu常用软件
    python模块安装
    ubuntu下玩三国杀
    递归函数
    匿名函数
    装饰器函数
    生成器
  • 原文地址:https://www.cnblogs.com/wangshengli520/p/10654501.html
Copyright © 2011-2022 走看看