在父母轉盤浮油js里面的兒童轉盤

Question

每個滑塊幻燈片都有自己的子滑塊，無論其父級如何，它都具有獨立性。 現在我想要的視圖是遵循布局。

這是我迄今取得的成就。 小提琴

$('.slider').slick({
  slidesToShow: 3,
  centerMode: true,
  centerPadding: 0,
  dots: true,
  infinite: true,
  cssEase: 'linear'
});

$('.slider-mini').slick({
  slidesToShow: 3,
  dots: false,
  infinite: true,
  cssEase: 'linear'
});

Answer 1

如果我理解正確，這就是你要找的東西：

 $('.slider').slick({ slidesToShow: 3, centerMode: true, centerPadding: 0, dots: true, infinite: true, cssEase: 'linear', onBeforeChange: (slider) => { console.log('onBeforeChange', slider); slider.$slider.addClass('sliding'); }, onAfterChange: (slider) => { console.log('onAfterChange', slider); slider.$slider.removeClass('sliding'); } }) $('.slider-mini').slick({ slidesToShow: 3, dots: false, infinite: true, cssEase: 'linear' }); 

 .slider { width: 650px; margin: 0 auto; } img { width: 200px; height: 200px; } .red { background: red; height: 200px; width: 200px } .green { background: green; height: 200px; width: 200px } .yellow { background: yellow; height: 200px; width: 200px } .black { background: black; height: 200px; width: 200px } .slick-center { border: solid 0px blue } .red-mini { background: red; margin-right: 5px; margin-top: 10px } .green-mini { background: green; margin-right: 5px; margin-top: 10px } .yellow-mini { background: yellow; margin-right: 5px; margin-top: 10px } .black-mini { background: black; margin-right: 5px; margin-top: 10px } .slider .slick-prev { background: black } .slider .slick-next { background: black; z-index: 5; } .slider-mini { margin-top: 10px; padding: 0 20px; width: 640px; margin-left: -215px; visibility: hidden; } .slick-center .slider-mini { visibility: visible; } .slider-mini .slick-prev { left: 0; transition: opacity 250ms; } .slider-mini .slick-next { right: 0; transition: opacity 250ms; } .slider.sliding .slick-prev, .slider.sliding .slick-next { opacity: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script> <link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/> <div class="slider"> <div> <div class="red"> </div> <div class="slider-mini"> <div class="red-mini"> 1 </div> <div class="red-mini"> 2 </div> <div class="red-mini"> 3 </div> <div class="red-mini"> 4 </div> <div class="red-mini"> 5 </div> </div> </div> <div> <div class="green"> </div> <div class="slider-mini"> <div class="green-mini"> 1 </div> <div class="green-mini"> 2 </div> <div class="green-mini"> 3 </div> <div class="green-mini"> 4 </div> <div class="green-mini"> 5 </div> </div> </div> <div> <div class="yellow"> </div> <div class="slider-mini"> <div class="yellow-mini"> 1 </div> <div class="yellow-mini"> 2 </div> <div class="yellow-mini"> 3 </div> <div class="yellow-mini"> 4 </div> <div class="yellow-mini"> 5 </div> </div> </div> <div> <div class="black"> </div> <div class="slider-mini"> <div class="black-mini"> 1 </div> <div class="black-mini"> 2 </div> <div class="black-mini"> 3 </div> <div class="black-mini"> 4 </div> <div class="black-mini"> 5 </div> </div> </div> </div> 

Answer 2

我采取了另一種方法，而不是thedude提供的答案，這也可能對你很有意思。

JSFiddle我的回答

注意：觀察我已將Slick庫升級到1.6.0，因此現在也需要slick-theme.css（除非你想用你自己的東西完全替換它）

我已經改變了HTML的結構，將所有迷你滑塊放在div.mini-sliders ，並將該元素轉換為無法手動調整的滑塊。 然后通過設置頂部滑塊的asNavFor選項指向此滑塊，頂部滑塊會同時自動移動迷你滑塊，這看起來更好，因為之前的迷你滑塊不會突然消失。 當滑塊按要求更改時，我也使箭頭消失。

我遇到了迷你滑塊按鈕的問題，因為它們顯示在可見區域之外並在兄弟滑塊中可見，但考慮到你的模型顯示箭頭與滑塊重疊，可以輕松修復一些CSS同時也符合您的設計。 如果要使按鈕更向外顯示，則需要稍微增加.mini-sliders .slick-slide .slick-slide選擇器中.mini-sliders .slick-slide .slick-slide 。

 $('.slider').slick({ slidesToShow: 3, centerMode: true, centerPadding: 0, swipeToSlide: true, dots: false, infinite: true, asNavFor: '.mini-sliders', cssEase: 'linear' }); $('.mini-sliders').slick({ slidesToShow: 1, arrows: false, draggable: false, touchMove: false, dots: false }).on('beforeChange', function() { $('.mini-sliders button').hide(); }).on('afterChange', function() { $('.mini-sliders button').show(); }); $('.mini-sliders .slick-slide').slick({ slidesToShow: 5, dots: false, swipeToSlide: true, arrows: true, infinite: true, cssEase: 'linear' }).on('beforeChange', function(e) { e.stopPropagation(); }); 

 .slider, .mini-sliders { width: 650px; margin: 0 auto; } .slider .slick-slide { height: 200px; } .mini-sliders .slick-slide .slick-slide { margin: 10px 5px; height: 80px; color: white; text-shadow: 1px 1px 1px black; } .slider .slick-prev { left: -10px; z-index: 10; } .slider .slick-next { right: -10px; } .mini-sliders .slick-slide .slick-prev { left: 0; z-index: 10; } .mini-sliders .slick-slide .slick-next { right: 0; } .slick-arrow { background: black !important; } img { width: 200px; } .red { background: red; } .green { background: green; } .yellow { background: yellow; } .black { background: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> <link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" rel="stylesheet"/> <div class="slider"> <div class="red"></div> <div class="green"></div> <div class="yellow"></div> <div class="black"></div> </div> <div class="mini-sliders"> <div> <div class="red">1</div> <div class="red">2</div> <div class="red">3</div> <div class="red">4</div> <div class="red">5</div> <div class="red">6</div> </div> <div> <div class="green">1</div> <div class="green">2</div> <div class="green">3</div> <div class="green">4</div> <div class="green">5</div> <div class="green">6</div> </div> <div> <div class="yellow">1</div> <div class="yellow">2</div> <div class="yellow">3</div> <div class="yellow">4</div> <div class="yellow">5</div> <div class="yellow">6</div> </div> <div> <div class="black">1</div> <div class="black">2</div> <div class="black">3</div> <div class="black">4</div> <div class="black">5</div> <div class="black">6</div> </div> </div>