新闻中心 网络推广 网站建设 优化推广

swiper在同一个页面中多次使用swiper避免冲突

时间:2019-09-07   来源:本站

曾经在写一个页面的时候,其中有两个轮播图,于是都用swiper 来写了,写完之后发现显示的效果不是


预期的效果,有很大的问题;后来检查发现两个轮播图相互影响了,样式啥的冲突了,因为我没有单独的给container


或者slide 起类名,所以样式相互冲突了;


现在总结一下在同一个页面中使用多个 swiper 的方法:


swiper 的基本结构:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>


1. 给swiper-container 再起个类名,然后操作这个新的类名,这样两个 swiper 不会冲突


<div class="swiper-container swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>
<div class="swiper-container swiper2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>


2.无论是在初始化的时候还是设置样式的时候一定记得区别不同的siwper,这样就不会相互影响了;


上一篇:没有了!
新闻推荐
沙井营销型网站建设哪个公司好
沙井营销型网站建设哪个公司好

沙井营销型网站建设哪个公司好还要时刻注意分析搜索引擎的特性,观察其功能设置的变化,搜索引擎有功能上的...

布吉高端品牌网站设计多少钱
布吉高端品牌网站设计多少钱

布吉高端品牌网站设计多少钱建设三站合一平台,络三站合一。络自行研发一套建站系统。新系统性地引入三站合...

深圳响应式网站制作哪个好
深圳响应式网站制作哪个好

深圳响应式网站制作哪个好明确了要解决怎样的问题,站的基本分类,是的类似于那种还是细分的类似于产品经理...

横岗手机网站建设报价
横岗手机网站建设报价

横岗手机网站建设报价站的内容可以有效地吸引用户,但功能的完整性也非常重要。这可以直接影响用户的体验感...

Top