Javascript 父转盘内的子转盘滑动js

每个滑块都有自己的子滑块，该子滑块独立于其父滑块。现在我想要的视图是下面的布局

这就是我迄今为止所取得的成就

---

如果我理解正确，这就是您要寻找的：

$（'.slider'）。光滑({
幻灯片放映：3，
centerMode：对，
中心填充：0，
点：是的，
无限：是的，
cssEase:'线性'，
onBeforeChange：（滑块）=>{
log（'onBeforeChange'，滑块）；
slider.$slider.addClass（'slidering'）；
},
onAfterChange：（滑块）=>{
log（'onAfterChange'，滑块）；
slider.$slider.removeClass（'slider'）；
}
})
$（'.slider mini'）。光滑({
幻灯片放映：3，
点：错，
无限：是的，
cssEase：“线性”
});
滑块{
宽度：650px；
保证金：0自动；
}
img{
宽度：200px；
高度：200px；
}
瑞德先生{
背景：红色；
高度：200px；
宽度：200px
}
格林先生{
背景：绿色；
高度：200px；
宽度：200px
}
黄先生{
背景：黄色；
高度：200px；
宽度：200px
}
布莱克先生{
背景：黑色；
高度：200px；
宽度：200px
}
.圆滑中心{
边框：实心0px蓝色
}
.红色迷你{
背景：红色；
右边距：5px；
利润上限：10px
}
.绿色迷你{
背景：绿色；
右边距：5px；
利润上限：10px
}
黄色迷你{
背景：黄色；
右边距：5px；
利润上限：10px
}
.黑色迷你{
背景：黑色；
右边距：5px；
利润上限：10px
}
.滑杆.滑杆{
背景：黑色
}
.滑球，下一个滑球{
背景：黑色；
z指数：5；
}
.迷你滑块{
边缘顶部：10px；
填充：0 20px；
宽度：640px；
左边距：-215px；
可见性：隐藏；
}
.圆滑中心.迷你滑块{
能见度：可见；
}
.迷你滑盖.光滑上盖{
左：0；
过渡：不透明度250ms；
}
.迷你滑球.下一个滑球{
右：0；
过渡：不透明度250ms；
}
.slider.sliding.slick上一个、.slider.sliding.slick下一个{
不透明度：0；
}

1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
我选择了另一种方法，而不是杜德提供的答案，这可能也会让您感兴趣


注意：注意，我已经将Slick库升级到1.6.0，因此现在还需要Slick-theme.css（除非您想完全用自己的东西替换它）

我稍微改变了HTML的结构，将所有迷你滑块放在一个
div.mini-sliders
中，并将该元素变成了一个无法手动调整的滑块。然后，通过将顶部滑块的
asNavFor
选项设置为指向此滑块，顶部滑块会同时自动移动小滑块，这看起来更漂亮，因为上一个小滑块不会突然消失。我还使箭头在滑块按要求更改时消失

我遇到了一个小滑块按钮的问题，因为这些按钮显示在其可见区域之外，并在兄弟滑块中可见，但考虑到您的模型显示箭头与滑块重叠，CSS很容易修复，同时也与您的设计相匹配。如果要使按钮更向外显示，则需要稍微增加
.mini sliders.slick slide.slick slide
选择器中幻灯片的边距


$（'.slider'）。光滑({
幻灯片放映：3，
centerMode：对，
中心填充：0，
swipeToSlide：没错，
点：错，
无限：是的，
asNavFor:“.mini滑块”，
cssEase：“线性”
});
$（'.mini-sliders'）。光滑({
幻灯片放映：1，
箭头：错，
可拖动：错误，
touchMove:false，
圆点：错
}).on（'beforeChange'，function（））{
$（'.mini-sliders按钮'）.hide（）；
}).on（'afterChange'，function（）{
$（'.mini-sliders按钮'）.show（）；
});
$（'.mini sliders.slick slide'）。slick({
幻灯片放映：5，
点：错，
swipeToSlide：没错，
箭头：是的，
无限：是的，
cssEase：“线性”
}).on（'beforeChange'，函数（e）{
e、 停止传播（）；
});
.slider、.mini滑块{
宽度：650px；
保证金：0自动；
}
.滑杆.滑杆{
高度：200px；
}
.迷你滑梯.光滑滑梯.光滑滑梯{
利润率：10px 5px；
高度：80px；
颜色：白色；
文本阴影：1px 1px 1px黑色；
}
.滑杆.滑杆{
左：-10px；
z指数：10；
}
.滑球，下一个滑球{
右：-10px；
}
.迷你滑梯.光滑滑梯.光滑滑梯{
左：0；
z指数：10；
}
.迷你滑块.光滑的滑块.光滑的下一个{
右：0；
}
.光滑的箭{
背景：黑色！重要；
}
img{
宽度：200px；
}
瑞德先生{
背景：红色；
}
格林先生{
背景：绿色；
}
黄先生{
背景：黄色；
}
布莱克先生{
背景：黑色；
}

1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
我想你应该开始悬赏我们能不能阻止arrow为孩子搬家carousel@Carlos编辑我的答案以在滑动时隐藏子箭头
$('.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'
});