zoukankan      html  css  js  c++  java
  • 一个页面多个bootstrip轮播以及一个页面多个swiper轮播 冲突问题

    Bootstript轮播冲突

    解决方法:

    使用不同的id

    复制代码
    <div id="myCarousel1" class="carousel slide">   
     <!-- 轮播(Carousel)项目 -->
        <div class="carousel-inner">
            <div class="item active">
               <img src="images/slide1.jpg" alt="First slide">
               <div class="carousel-caption">标题 1</div>
            </div>
            <div class="item">
               <img src="images/slide2.jpg" alt="Second slide">
               <div class="carousel-caption">标题 2</div>
            </div>
        </div>
        <!-- 轮播(Carousel)导航 -->
        <a class="carousel-control left" href="#myCarousel1" 
        data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel1" 
        data-slide="next">&rsaquo;</a>
    </div>
    复制代码
    复制代码
    <div id="myCarousel2" class="carousel slide">   
     <!-- 轮播(Carousel)项目 -->
        <div class="carousel-inner">
            <div class="item active">
               <img src="images/slide1.jpg" alt="First slide">
               <div class="carousel-caption">标题 1</div>
            </div>
            <div class="item">
               <img src="images/slide2.jpg" alt="Second slide">
               <div class="carousel-caption">标题 2</div>
            </div>
        </div>
        <!-- 轮播(Carousel)导航 -->
        <a class="carousel-control left" href="#myCarousel2" 
        data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel2" 
        data-slide="next">&rsaquo;</a>
    </div>
    复制代码

    Swiper轮播冲突

    解决方法

    加一层父元素。注意标红部分。

    复制代码
    <div class="lb1">
        <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide swipers"><a href="" class="lbck"><img class="lbmg "src="images/lba1.jpg" alt=""></a></div>
          <div class="swiper-slide swipers"><a href="" class="lbck"><img class="lbmg "src="images/lba2.jpg" alt=""></a></div>
        </div>
        <div class="pagination"></div>
      </div>
      <script>
      var mySwiper = new Swiper('.lb1 .swiper-container',{
        loop: true,
        autoplay: 3000,
        pagination: '.lb1 .pagination',
        paginationClickable: true  
      })
      </script>
    </div>
    复制代码
    复制代码
    <div class="lb2">
        <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide swipers"><a href="" class="lbck"><img class="lbmg "src="images/lba1.jpg" alt=""></a></div>
          <div class="swiper-slide swipers"><a href="" class="lbck"><img class="lbmg "src="images/lba2.jpg" alt=""></a></div>
        </div>
        <div class="pagination"></div>
      </div>
      <script>
      var mySwiper = new Swiper('.lb2 .swiper-container',{
        loop: true,
        autoplay: 3000,
        pagination: '.lb2 .pagination',
        paginationClickable: true  
      })
      </script>
    </div>
    复制代码
  • 相关阅读:
    多维数组和元组
    字符串
    列表
    JQuery事件的绑定
    JQuery设置缓慢下拉大行多次执行的解决办法,以及stop()函数的简单理解
    JQuery_AJAX简单笔记
    C#后台验证身份证号码的一个方法
    JQuery AJAX请求aspx后台方法
    网络编辑器插件ckeditor+ckfinder配置
    请编程实现:产生一个int数组,长度为100,并向其中随机插入1-100,并且不能重复(百度了一下,get一种高性能算法,非递归)
  • 原文地址:https://www.cnblogs.com/hgbgfg/p/5435549.html
Copyright © 2011-2022 走看看