2017-04-05 171 views
1

每个滑块滑块都有其自己的子滑块,它独立于其父级。现在我想要的视图是以下布局。父级旋转木马里面的儿童旋转木马js

enter image description here

这是我迄今为止所取得。 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' 
}); 
+1

我想你应该开始一个赏金 – Yoan

回答

2

如果我理解正确的话,这是你在找什么:

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

+0

我们可以从移动儿童旋转木马 – Carlos

+0

@Carlos编辑我的答案隐藏孩子箭头,而滑动停止箭头 – thedude

1

我去另一种方法比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>