Slick Sliderアクティブな位置を保持する複数のスライダ

Question

1つのページに複数のSlickスライダがあります。各スライダにはサムネイルNavがあります。問題は、スライダが最初のサムネイルで開始するのではなく、以前の位置を現在の位置に使用することです。

私は動的にIDを追加してお互いに影響しないようにする必要があると推測しています。すべてのスライダーをバイパスする

$('.slider-products').slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    arrows: false, 
    fade: true, 
    asNavFor: '.slider-nav' 
    }); 


    var windowWidth = $(window).width(); 
    if(windowWidth <= 800) { 
    $('.slider-nav').slick({ 
    vertical: false, 
    slidesToShow: 4, 
    slidesToScroll: 1, 
    asNavFor: '.slider-products', 
    arrow: false, 
    focusOnSelect: true 
    }); 
} 
else { 
    $('.slider-nav').slick({ 
    vertical: true, 
    slidesToShow: 3, 
    slidesToScroll: 1, 
    asNavFor: '.slider-products', 
    focusOnSelect: true 
}); 
} 

Answer 1

1. 使用the .each method（私のJSの知識は非常に基本的なものです）。
2. スライダの各ペアに番号付きクラスをthe .addClass methodで追加します。
3. the responsive optionを使用して、画面の幅に応じて設定を変更します。

結果を確認してください：https://codepen.io/glebkema/pen/bWRZzB

var numSlick = 0; 
 
$('.slider-products').each(function() { 
 
    numSlick++; 
 
    $(this).addClass('slider-' + numSlick).slick({ 
 
    arrows: false, 
 
    asNavFor: '.slider-nav.slider-' + numSlick, 
 
    fade: true, 
 
    slidesToScroll: 1, 
 
    slidesToShow: 1, 
 
    }); 
 
}); 
 

 
numSlick = 0; 
 
$('.slider-nav').each(function() { 
 
    numSlick++; 
 
    $(this).addClass('slider-' + numSlick).slick({ 
 
    arrow: false, 
 
    asNavFor: '.slider-products.slider-' + numSlick, 
 
    focusOnSelect: true, 
 
    slidesToScroll: 1, 
 
    slidesToShow: 4, 
 
    responsive: [ 
 
     { 
 
     breakpoint: 800, 
 
     settings: { 
 
      slidesToShow: 3, 
 
     } 
 
     } 
 
    ] 
 
    }); 
 
});

.slick-arrow { 
 
    display: none !important; /* `arrows: false;` is not enough to prevent horizontal scrolling */ 
 
} 
 
.slick-slide { 
 
    background: #c69; 
 
    border: 2px solid #fff; 
 
    color: #fff; 
 
    font-size: 36px; 
 
    font-weight: bold; 
 
    outline: none; /* prevent the appearance of a tiny gray contour */ 
 
    padding: 18px 0; 
 
    text-align: center; 
 
} 
 
.slider:nth-of-type(n+3) .slick-slide { background: #9c6; } 
 
.slider:nth-of-type(n+5) .slick-slide { background: #69c; } 
 
.slider-nav { 
 
    margin-bottom: 12px; 
 
} 
 
.slider-nav .slick-slide:hover { 
 
    cursor: pointer; 
 
    opacity: .7; 
 
}

<div class="slider slider-products"> 
 
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> 
 
</div> 
 
<div class="slider slider-nav"> 
 
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> 
 
</div> 
 

 
<div class="slider slider-products"> 
 
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> 
 
</div> 
 
<div class="slider slider-nav"> 
 
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> 
 
</div> 
 

 
<div class="slider slider-products"> 
 
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> 
 
</div> 
 
<div class="slider slider-nav"> 
 
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> 
 
</div> 
 

 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>