滑动滑块多滑块保持活动位置

我在一个页面上有多个滑动滑块。每个滑块都有一个缩略图导航。问题是滑块使用以前的当前位置，而不是从第一个缩略图开始。滑动滑块多滑块保持活动位置

我猜我需要一种方式来动态添加一个ID，所以他们不会互相影响。（我的JS知识是非常基本的）

$('.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 
}); 
}

来源

2017-04-26 sarah3585

你可以把你的代码示例为一个可运行的代码片断？这将帮助我们找到解决问题的办法。 – ConnorsFan

使用the .each method绕过所有的滑块。
通过the .addClass method为每对滑块添加编号类。使用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>

来源

2017-05-03 05:14:33

滑动滑块多滑块保持活动位置

回答

相关问题