web-dev-qa-db-ja.com

複数の滑らかなスライダーの問題

Slick.jsプラグインとそのスライダー同期機能を使用しています。私が抱えている問題は、単一のページで複数のスライダーを使用する場合、次または前のボタンをクリックすることにより、プラグインがページ上のすべてのスライダーに対してアクションを実行することです。 JQueryを使用して、ページの各スライダーで次の、前の作業を行うために何かできることはありませんか？前もって感謝します。

HTML

<div class="slider">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>                                                            
<div class="slider-nav">                                  
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

スリックランスクリプト

$('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.slider',
    dots: true,
    arrows: true,
    centerMode: false,
    focusOnSelect: true
});
jqueryslick.js
10
Emil Gurbanov

これは、class="slider-for"を使用してすべての要素を反復処理し、idをすべての.slider-for要素とそれぞれの.slider-nav要素に動的に割り当てるeachループを持つ別のソリューションです。

しかし、落とし穴があります。それらは完全な順序で配置する必要があります。

jQuery

$('.slider-for').each(function(key, item) {

  var sliderIdName = 'slider' + key;
  var sliderNavIdName = 'sliderNav' + key;

  this.id = sliderIdName;
  $('.slider-nav')[key].id = sliderNavIdName;

  var sliderId = '#' + sliderIdName;
  var sliderNavId = '#' + sliderNavIdName;

  $(sliderId).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: sliderNavId
  });

  $(sliderNavId).slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: sliderId,
    dots: true,
    arrows: true,
    centerMode: false,
    focusOnSelect: true
  });

});
25
kanudo

idではなくclassでjqueryを呼び出します。

次または前のボタンをクリックすると、プラグインはページ上のすべてのスライダーに対してアクションを実行します

これは、クラス名でjQueryを呼び出すため、それぞれのクラスを持つすべての要素に影響するためです。

HTML

<div class="slider" id="slider_1">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<div class="slider-nav" id="slider_nav_1">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<div class="slider" id="slider_2">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<div class="slider-nav" id="slider_nav_2">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

jQuery

var sliders = {
  1: {slider : '#slider_1', nav: '#slider_nav_1'},
  2: {slider : '#slider_2', nav: '#slider_nav_2'},
  3: {slider : '#slider_3', nav: '#slider_nav_3'}
};

$.each(sliders, function() {

  $(this.slider).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: this.nav
  });
  $(this.nav).slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: this.slider,
    dots: true,
    arrows: true,
    centerMode: false,
    focusOnSelect: true
  });

});
2
kanudo