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

标签 jquery html css flexslider

我正在尝试根据以下模型使用 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/

相关文章:

javascript - 我想在单击复选框时传递一个 id 参数

css - Node Express 将我的样式表、插件和 javascript 指向当前 url

javascript - Jquery - $.mobile.changePage 不起作用

jquery - 接收新数据时闪烁效果

javascript - 将值从一个页面的ajax函数传递到另一页面的ajax函数

css - 生成具有某种模式的样式序列

jquery - 修复无样式内容的 Flash (FOUC)

javascript - 使用 CSS3 Transform Scale 和 jQuery 制作动画脉冲效果

javascript - 当鼠标移动到覆盖元素的东西时不要触发 onmouseout

html - 在深色图像上放置一个 div