父级旋转木马里面的儿童旋转木马js
问题描述：
每个滑块滑块都有其自己的子滑块，它独立于其父级。现在我想要的视图是以下布局。父级旋转木马里面的儿童旋转木马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中，并将该元素转换为无法手动调整的滑块。然后，通过将顶部滑块的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>
我想你应该开始一个赏金 – Yoan