Youtube /谷歌风格旋转木马滑块

时间:2017-09-24 14:56:30

标签: javascript jquery youtube google-plus carousel

我想制作一个类似于你在Youtube.com的新设计上看到的旋转木马滑块和这样的页面:https://plus.google.com/discover/w29saB

有关如何构建此内容的任何建议,或者有助于此的Jquery插件。

我已经尝试过itemSlide(),但我不知道如何获取CSS以便它正确地在容器DIV中呈现。此外,Itemslide也没有给出箭头滚动到下一页。

其他旋转木马插件即使使用其响应选项我也会查看,让您指定适合页面的项目数。我希望这能由css决定。

更新我已经让itemSlide()在容器div中渲染但是我仍然需要添加箭头以便在单击时滚动。我想让按钮叠加是一个正确的CSS问题。单击时滚动工作可能是itemSlide api特有的东西,一旦箭头正确覆盖,我应该能够弄清楚。 itemSlide()作为轮播滑块库:http://itemslide.github.io/

2 个答案:

答案 0 :(得分:0)

为什么不在DIV中尝试DIV。将重叠隐藏在css中。箭头可以是div按钮,可以移动内部div" X"给定方向上的像素数,以匹配轮播格栅div中的块大小。

答案 1 :(得分:0)

重叠箭头后,您可以使用库的disable_clicktoslide选项,这样点击幻灯片就不会移动到它们。

要使箭头生效,请调用carousel对象上的next()和previous()函数。

您还可以使用函数getActiveIndex()来检测用户在旋转木马上的位置。

祝你好运!