如何在网站中使用多个刷卡器？

Question

我在我的网站上使用了 multiples swiper，方法是初始化一个调用 swip 库的函数，但它对我不起作用

这是我的功能

<script type="text/javascript">
 $(document).ready(function(){
//     selector,slideperview,speed,effect,loop,direction,autoplayspeed
      rs('swiper2',".swiper-container2", 1, 400, 'overflow', true, 'vertical', 400);
      rs('swiper3',"#swiper-container3", 1, 400, 'overflow', true, 'vertical', 400);
 })
</script>

这里是 Swiper 选项

function rs(swipers,selector,slideperview,speed,effect,loop,direction,autoplayspeed) {

    var swipers = new Swiper(selector , {
        pagination: false,
        paginationClickable: false,
        spaceBetween: 0,
        slidesPerView: slideperview,
        centeredSlides: true,
        progress: true,
        autoplayDisableOnInteraction: true,
        keyboardControl: true,
        autoResize: true,
        resizeReInit: true,
        resistance: true,
        preventClicks: true,
        preventClicksPropagation: true,
        speed: speed,
        mousewheelControl: false,
        loop: loop, 
        direction: direction,
        autoplay: 6000,
        effect: effect, //fade coverflow cube
    });
}

Answer 1

您应该已经发布了完整的代码。这是一个示例，其中包含 2 个刷卡器，工作正常。

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}
.swiper-container,
.swiper-container-2 {
  width: 500px;
  height: 300px;
  margin: 20px auto;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.2/css/swiper.min.css" rel="stylesheet" />

<!-- Swiper -->
<div id='swipe1' 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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
</div>
<div id='swipe2' 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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
</div>

<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.2/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
  function rs(swipers, selector, slideperview, speed, effect, loop, direction, autoplayspeed) {
      var swipers = new Swiper(selector, {
        pagination: false,
        paginationClickable: false,
        spaceBetween: 0,
        slidesPerView: slideperview,
        centeredSlides: true,
        progress: true,
        autoplayDisableOnInteraction: true,
        keyboardControl: true,
        autoResize: true,
        resizeReInit: true,
        resistance: true,
        preventClicks: true,
        preventClicksPropagation: true,
        speed: speed,
        mousewheelControl: false,
        loop: loop,
        direction: direction,
        autoplay: 6000,
        effect: effect, //fade coverflow cube
      });
    }
    //var swiper1 = new Swiper('#swipe1');
    //var swiper2 = new Swiper('#swipe2');
  rs('swiper1', "#swipe1", 1, 400, 'overflow', true, 'vertical', 400);
  rs('swiper2', "#swipe2", 1, 400, 'overflow', true, 'vertical', 400);
</script>

如何在网站中使用多个刷卡器？

How to use multiple swiper in a website?

javascript

jquery

swipe