すべてのスライダースライドには、親に関係なく独立した子スライダーがあります。今私が望むビューは、次のレイアウトです。親カルーセルslick js内の子カルーセル
これは私がこれまでに達成したものです。 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'
});
私が正しく理解していれば、これはあなたが探しているものです。
$('.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>私はと面白いかもしれませんthedudeが提供する答え、より別のアプローチのために行ってきましたあなたも。
注：あなたは完全にあなたの何かと交換する場合を除き、私は1.6.0にスリックライブラリをアップグレードしたので、スリックtheme.cssも（今必要とされていることを確認私は、HTMLの構造を少し変えて、すべてのミニスライダをdiv.mini-slidersに入れ、その要素を手動で調整することができないスライダに変えました。このスライダをポイントするように上部スライダのオプションを設定すると、上部スライダは同時に自動的にミニスライダを移動します。これは、以前のミニスライダが突然消えないため、よりよく見えます。私はまた、スライダが要求どおりに変化したときに矢印を消してしまった。
ミニスライダのボタンで問題が発生しましたが、これは表示領域外に表示され、兄弟スライダで表示されていましたが、モックアップではスライダと重なっていることを示すため、あなたのデザインにマッチしながら、それを簡単に修正しました。ボタンを外側にもっと見せたい場合は、.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>
私はあなたの恵み – Yoan