圆滑的旋转木马移动导航点 [英] Slick carousel moving nav dots
本文介绍了圆滑的旋转木马移动导航点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 http://kenwheeler.github.io/slick 轮播,我需要即使有8张以上的幻灯片,也可以将点数限制为8.
I am using http://kenwheeler.github.io/slick carousel and I need to limit dots number to 8 even if there more than 8 slides.
导航点应在左右方向具有箭头,以提示用户要显示的点更多.
Nav dots should have arrows to the left and to the right that suggest user that there are more dots to show.
有人可以提出一个解决方案/在使用圆滑的自定义导航点方面有类似的经验吗?
Can anybody suggest a solution / had similar experience in customizing nav dots with slick?
推荐答案
我想出了一个解决方案使用CSS将点数限制为三个
I came up with a solution to limit the number of dots to three using CSS
/* hiding all bullets by default */
.slick-dots li {
display: none
}
/* only displaying the active bullets and the 2 bullets next to it */
.slick-dots li.slick-active,
.slick-dots li.slick-active + li,
.slick-dots li.slick-active + li + li {
display: block;
}
/* displaying the last three bullets when slick-active class isn't applied to any li before them */
.slick-dots li:nth-last-child(1),
.slick-dots li:nth-last-child(2),
.slick-dots li:nth-last-child(3) {
display: block;
}
/* hiding the last three bullets if slick-active exist before them */
.slick-dots li.slick-active ~ li:nth-last-child(1),
.slick-dots li.slick-active ~ li:nth-last-child(2),
.slick-dots li.slick-active ~ li:nth-last-child(3) {
display: none;
}
/* specific conditions to always display the last three bullets */
.slick-dots li.slick-active + li + li:nth-last-child(3),
.slick-dots li.slick-active + li + li:nth-last-child(2),
.slick-dots li.slick-active + li + li:nth-last-child(1),
.slick-dots li.slick-active + li:nth-last-child(3),
.slick-dots li.slick-active + li:nth-last-child(2),
.slick-dots li.slick-active + li:nth-last-child(1){
display: block;
}
当然可以使用预处理器来完成此操作,但是它可以正常工作.
Of course this can be made pretty with preprocessors but it is working.
正在工作的小提琴: http://jsfiddle.net/1gLn1cbg/
这篇关于圆滑的旋转木马移动导航点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文