同一个页面中使用多个 Swiper

Swiper.js 是一个牛逼的移动端slider 组件，遇到了个需要在同一个页面使用多个slider 的问题。如果直接用官方 DEMO 的例子是会冲突的。

方式一

硬编码，如：

<div class="swiper-container s1">
  ...
</div>
<div class="swiper-container s2">
  ...
</div>
<div class="swiper-container s3">
  ...
</div>

var swiper1 = new Swiper('.s1', { /* Options here */ })
var swiper2 = new Swiper('.s2', { /* Options here */ })
var swiper3 = new Swiper('.s3', { /* Options here */ })

这种方式不怎么优雅。

方式二

$(".swiper-container").each(function(index, element){
    var $this = $(this);
    $this.addClass("instance-" + index);
    $this.find(".swiper-button-prev").addClass("btn-prev-" + index);
    $this.find(".swiper-button-next").addClass("btn-next-" + index);
    var swiper = new Swiper(".instance-" + index, {
        // your settings ...
        nextButton: ".btn-next-" + index,
        prevButton: ".btn-prev-" + index
    });
});

<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 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 class="swiper-slide">Slide 11</div>
        <div class="swiper-slide">Slide 12</div>
        <div class="swiper-slide">Slide 13</div>
        <div class="swiper-slide">Slide 14</div>
        <div class="swiper-slide">Slide 15</div>
        <div class="swiper-slide">Slide 16</div>
        <div class="swiper-slide">Slide 17</div>
        <div class="swiper-slide">Slide 18</div>
        <div class="swiper-slide">Slide 19</div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<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 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 class="swiper-slide">Slide 11</div>
        <div class="swiper-slide">Slide 12</div>
        <div class="swiper-slide">Slide 13</div>
        <div class="swiper-slide">Slide 14</div>
        <div class="swiper-slide">Slide 15</div>
        <div class="swiper-slide">Slide 16</div>
        <div class="swiper-slide">Slide 17</div>
        <div class="swiper-slide">Slide 18</div>
        <div class="swiper-slide">Slide 19</div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

It is necessary to add a unique selector to each dependent element. That means also the prev and next buttons need to have a unique selector.