CODEWITHSUNDEEP
javascriptjqueryswipe
DMS-KH
DMS-KH

Reputation: 2797

How to use multiple swiper in a website?

I'm using multiples swiper for my website by initial a function to call swip library but it worn't work for me

Here is My function 

<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>

And here is Swiper option

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
    });
}

Upvotes: 2

Views: 1426

Answers (1)

choz
choz

Reputation: 17888

You should've posted your full code. Here's a sample with 2 swipers working just fine.

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>

Upvotes: 2

Related Questions