父級旋轉木馬裏面的兒童旋轉木馬js

Question

每個滑塊滑塊都有其自己的子滑塊，它獨立於其父級。現在我想要的視圖是以下佈局。

這是我迄今爲止所取得。 fiddle

$('.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 with my answer

注：觀察，我已經升級了油滑庫1.6.0，所以現在還需要光滑，theme.css（除非你想用的東西完全取代它的自己）

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

我遇到了迷你滑塊按鈕的問題，因爲這些按鈕顯示在可見區域之外，並在兄弟滑塊中顯示，但考慮到您的模型顯示的箭頭與滑塊重疊，有點的CSS很容易修復，同時也符合你的設計。如果您想讓按鈕向外顯示更多，則需要稍微增加.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>