迪拜de天空

从未如此喜欢

swiper

同一个页面面使用两个swiper轮播

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="swiper-container banner">
<div class="swiper-wrapper">
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
</div>
<div class="swiper-pagination banner">
</div>
</div>
<div class="swiper-container case ">
<div style="height:51px;">
</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
</div>
<div class="swiper-pagination case">
</div>
</div>

js代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
var mySwiper = $('.banner').swiper({
mode: 'horizontal',
loop: true,
autoResize: true,
pagination: '.banner .swiper-pagination',
paginationClickable: true,
autoplay: 3000,
});
var swiper = $('.case').swiper({
pagination: '.case .swiper-pagination',
slidesPerView: 4,
slidesPerColumn: 2,
paginationClickable: true,
spaceBetween: 20
});
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
声明swiper变量时 加一个同级元素加以区别即

var mySwiper = $('.banner')

var swiper = $('.case')

然后就是更改pagination的默认值用以区别显示的页面控件

pagination:'.banner'

pagination: '.case',


这就是基本的修改方式,值得一提的是swiper在使用中不予bootstrap冲突

单个swiper的使用

<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js">
  </script>
  <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js">
  </script>
  <div class="swiper-container" data-space-between='10' data-pagination='.swiper-pagination'
  data-autoplay="1000">
      <div class="swiper-wrapper">

          <div class="swiper-slide">
              <a href="#">
                  <img width="100%" height="180px" src="#" alt="">
              </a>
          </div>

      </div>
      <div class="swiper-pagination">
      </div>
  </div>
  <script>
      $(".swiper-container").swiper({
          loop: true,
          autoplay: 3000
      });
  </script>

评论系统未开启,无法评论!