Bootstript轮播冲突

解决方法:

使用不同的id

<div id="myCarousel1" class="carousel slide">
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="data:images/slide1.jpg" alt="First slide">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="data: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="data:images/slide1.jpg" alt="First slide">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="data: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="data:images/lba1.jpg" alt=""></a></div>
<div class="swiper-slide swipers"><a href="" class="lbck"><img class="lbmg "src="data: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="data:images/lba1.jpg" alt=""></a></div>
<div class="swiper-slide swipers"><a href="" class="lbck"><img class="lbmg "src="data: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>

tada~~完美解决

一个页面多个bootstrip轮播以及一个页面多个swiper轮播 冲突问题的更多相关文章

  1. Flask实战第49天:cms轮播图管理页面布局

    新建cms_banners.html继承cms_base.html {% extends 'cms/cms_base.html' %} {% block title %} 轮播图管理-CMS管理系统 ...

  2. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  3. swiper 轮播中常用的效果,持续更新

    swiper一款非常好用的轮播插件,支持移动端和PC端,用过很多次了,这次简单的总结一下.方便以后查找使用,说明一下,下面的例子是基于swiper 4.0+版本的,如果你是其他的版本,请自行前往官网查 ...

  4. 视频swiper轮播

    关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...

  5. swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  6. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

  7. swiper轮播在ie浏览器上遇到的显示问题探索

    前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...

  8. Swiper轮播隐藏再显示后不动

    公告用Swiper轮播方式,在某些不需要显示公告的页面进行隐藏,在需要展示公告的页面进行显示时候,公告不能正常轮播,在条件里加入重新设置轮播方法等网上的一些方法仍然不行,最后解决方法: this.my ...

  9. 使用jQuery开发一个带有密码强度检验的超酷注册页面

    在今天的jQuery教程中,我们将介绍如何使用jQuery和其它相关的插件来生成一个漂亮的带有密码强度检验的注册页面,希望大家喜欢! 相关的插件和类库 complexify - 一个密码强度检验jQu ...

随机推荐

  1. 清理系统 cmd

    echo 正在清除系统垃圾文件,请稍等......del /f /s /q %systemdrive%*.tmpdel /f /s /q %systemdrive%*._mpdel /f /s /q ...

  2. MongoDB学习-安装流程

    MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. 支持的数据结构非常松散,是类似json的bjson格式,因此可以存储比较复杂的数据类型. ...

  3. CentOS minimal网络设置

    CentOS minimal版本默认不启动网络,所以要自己配置. 配置过程: 编辑配置文件: vi /etc/sysconfig/network-script/ifcfg-eth0 需要更改两项 NM ...

  4. acdream1421 TV Show (枚举)

    http://acdream.info/problem?pid=1421 Andrew Stankevich Contest 22 TV Show Special JudgeTime Limit: 2 ...

  5. Enumerators and Enumerable

    Next week task is to learn how generic enumeration interface works, try to build a sample and write ...

  6. Hibernate的查询语言之HQL(二)——Hibernate查询的from字句

    from 是最简单的HQL语句,也是最基本的HQL语句.from 关键字后紧跟持久化类的类名.例如: from Person 表明从Person持久化类中取出全部的实例. 大部分时候,推荐位该Pers ...

  7. How to Find the Standard Deviation in Minitab

    Standard deviation, represented by the Greek Letter sigma σ, is a measure of dispersement in statist ...

  8. learning ddr write leveling

  9. 修改jenkins启动的默认用户

    # 背景 通过yum命令安装的jenkins,通过service jenkins去启动jenkins的话,默认的用户是jenkins,但jenkins这个用户是无法通过su切换过去的 ,在某些环节可能 ...

  10. 20165318 预备作业3 Linux安装及学习

    Linux安装及学习 一.VirtualBox和Ubuntu的安装 我安装的是VirtualBox 5.2.6和Ubuntu 16.04 LTS,安装过程按照老师博客中的步骤依次进行,出现了以下几个问 ...