我正在尝试根据以下模型使用 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 来插入现有代码并更改一些变量。任何帮助将不胜感激。
奥尼克斯。
最佳答案
- 不要在您的 HTML/CSS 模板设置中对整个站点使用包装器,这样您的 flexslider 周围的包装器实际上可以到达浏览器窗口的边缘
- 覆盖 flexslider 在 flex-viewport div 上设置的 overflow:hidden 样式(它将其设置为内联样式,因此您需要在初始化 flexslider 后使用 !important 或从 JS 更改)
- 使用 CSS 将 slider 中非当前图像的不透明度设置为非常低的值
这种方法应该能够让您非常非常接近您的竞争对手。
关于jquery - 如何编写具有可见边的 CSS3/JQuery/Flexslider 旋转木马,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24622299/