web-dev-qa-db-ja.com

1つのページに複数の「スワイパー」スライドショーを表示するにはどうすればよいですか。

私は スワイパースライドショー を使用しています。私は この特定のバージョン を使用しています。これが 正確なコード 私が使用しています。

2番目の「スワイパー」を追加すると、ページネーションが正しく機能しません。

2番目の「スワイパー」コンテナーに別のクラスを与えようとしましたが、機能しませんでした。

同じページにこれを2つ含めるにはどうすればよいですか？

ありがとう。

javascriptjqueryslideshowswiper
7
David Martins

彼らのサポートは私にこれを送った [〜＃〜]デモ[〜＃〜] 。できます！

JSファイルに対して何もする必要はありません。必要なのは、ページネーションにクラスを追加し、スライドショーにもクラスを追加し、他のすべてのクラスを区別することだけです（以下のコードを参照）。これを使用すると、同じページに必要な数のスリショーを含めることができます。

<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 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>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination1"></div>
    </div>

    <!-- Swiper -->
    <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 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>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination2"></div>

 <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
var swiper1 = new Swiper('.swiper1', {
    pagination: '.swiper-pagination1',
    paginationClickable: true,
});
var swiper2 = new Swiper('.swiper2', {
    pagination: '.swiper-pagination2',
    paginationClickable: true,
});
<script>
15
David Martins

私の現在のSwiperバージョンは3.4.2です。次へ-前へボタンをクリックすると、ページ上のすべてのスライダーが移動します。

異なる次-前のボタンを設定するために、私はこれを行いました：

<div class="swiper-pager">
  <div class="swiper-button-next></div>
  <div class="swiper-button-prev></div>
</div>

=>

<div class="swiper-pager">
  <div class="swiper-button-next swiper-button-next_slideshow<?=$module?>"></div>
  <div class="swiper-button-prev swiper-button-prev_slideshow<?=$module?>"></div>
</div>

そしてjsでは：

$('#slideshow<?=$module?>').swiper({
  mode: 'horizontal',
  slidesPerView: 1,
  pagination: '.slideshow<?=$module?>',
  paginationClickable: true,
  // nextButton: '.swiper-button-next', // not work properly
  // prevButton: '.swiper-button-prev', // not work properly
  nextButton: '.swiper-button-next_slideshow<?=$module?>',
  prevButton: '.swiper-button-prev_slideshow<?=$module?>',
  spaceBetween: 30,
  autoplay: 2500,
  autoplayDisableOnInteraction: true,
  loop: true
});
2
SergeTkach

@David Martinsどうもありがとうございましたが、現在のバージョン4.5.0では、少しjsコードを変更する必要があります。

<script type="text/javascript">
// Init Swiper
var swiper1 = new Swiper('.swiper1', {
  pagination: {
    el: '.swiper-pagination1',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // Enable debugger
  debugger: true,
});
var swiper2 = new Swiper('.swiper2', {
  autoHeight: true,
  pagination:  {
    el: '.swiper-pagination2',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // Enable debugger
  debugger: true,
});

とにかく、助けてくれてありがとう！

1
Illia Chil

複数のスワイパー間で前のボタンと次のボタンとの競合の解決策を探して誰かがここを通過している場合、これが私のためにそれを修正したものです（Nuxt.js/SSRプロジェクト）：

1）ボタンのdivにid属性を追加します：<div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div><div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div>

2）スワイパーオプションオブジェクトで、swiper-button-prevおよびswiper-button-nextクラスの代わりに新しいIDを参照します。

swiperOption: {
        direction: 'horizontal',
        slidesPerView: 4,
        spaceBetween: 6,
        navigation: {
          nextEl: '#button-next-relacionados',
          prevEl: '#button-prev-relacionados'
        },
0
ramigs

あなたは正しい道を進んでいました-2番目のスワイパーに別のクラスを追加する必要がありますがまたdist/js/swiper.min.jsに新しいクラスへの参照を追加する必要がありますそれ以外の場合は要素のみをターゲットにします元のクラスを使用します。これは、関連するセクションをコピーして、新しいIDで繰り返す場合にすぎません（wow.jsで行ったのと同じです）。

0
Lyall
var i=1;
var str1='sliderBox_'
var str2='.sliderBox_';
$('.swiper-container').each(function (index,value) {

    var classAdd = str1 + i;
    var classCall = str2 + i;
    var next_slider = 'slider-next' + i;
    var prev_slider = 'slider-prev' + i;
    $(this).addClass(classAdd);
    $(this).parent().siblings(".sites-slider__prev").addClass(prev_slider);
    $(this).parent().siblings(".sites-slider__next").addClass(next_slider);
    new Swiper(classCall,{
        slidesPerView: 4,
        spaceBetween: 20,
        loop: true,
        navigation: {
            nextEl: ('.' + next_slider),
            prevEl: ('.' + prev_slider),
        },
        breakpoints: {
            1199: {
                slidesPerView: 3,
            },
            991: {
                slidesPerView: 2,
            },
            600: {
                slidesPerView: 1,
            },
        }
    });
    i++;



});
0
Ahmed Matri