jquery - 如何编写具有可见边的 CSS3/JQuery/Flexslider 旋转木马

Question

我正在尝试根据以下模型使用 CSS3、JQuery 和 Flexslider 设计大型图像和文本轮播:

http://onixbox.net/ClientTest/REDAP/REDAP_Website_Concept.jpg

到目前为止，我得到了除侧面图像之外的所有图像:

http://onixbox.net/ClientTest/REDAP/index.htm

我的灵感来自 Cnet.com 的主页。

我不知道如何更改 Flexslider 来执行此操作。也许三个独立的同步 slider ？我对 HTML 和 CSS 很满意，但我只知道足够的 javascript/JQuery 来插入现有代码并更改一些变量。任何帮助将不胜感激。

奥尼克斯。

Answer 1

• 不要在您的 HTML/CSS 模板设置中对整个站点使用包装器，这样您的 flexslider 周围的包装器实际上可以到达浏览器窗口的边缘
• 覆盖 flexslider 在 flex-viewport div 上设置的 overflow:hidden 样式(它将其设置为内联样式，因此您需要在初始化 flexslider 后使用 !important 或从 JS 更改)
• 使用 CSS 将 slider 中非当前图像的不透明度设置为非常低的值

这种方法应该能够让您非常非常接近您的竞争对手。