Slick Slider Mehrere Slider, die aktive Position beibehalten

Question

Ich habe mehrere Slick Sliders auf einer Seite. Jeder Schieberegler hat eine Miniaturansicht. Das Problem ist, dass die Schieberegler die vorherige Position verwenden, anstatt mit der ersten Miniaturansicht zu beginnen.

Ich denke, ich brauche eine Möglichkeit, eine ID dynamisch hinzuzufügen, so dass sie sich nicht gegenseitig beeinflussen. (My JS Wissen ist sehr einfach)

$('.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. Verwenden the .each method alle Regler zu umgehen.
2. Fügen Sie eine nummerierte Klasse für jedes Schiebereglerpaar hinzu, indem Sie the .addClass method eingeben.
3. Verwenden Sie the responsive option, um die Einstellungen abhängig von der Breite des Bildschirms zu ändern.

Bitte überprüfen Sie das Ergebnis: 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>