javascript - jQuery 响应式横幅自动调整图像和内容的大小以适应空间

标签 javascript jquery css banner flexslider

我想创建自定义横幅或下载一个。

横幅有以下要求,

  1. 我可以在此横幅中添加图片和文字。
  2. 您可以在每张幻灯片上添加多张图片和文字,例如,一张幻灯片的两边有两张图片和文字,第二张幻灯片的两边有三张图片和文字。
  3. 重要 - 如果图像是小缩略图,文本应填充空白区域或图像周围。横幅应响应内部元素(可以是 div)。如果图像很大,文字应该放在下面 图像或侧面。
  4. 向左或向右滑动
  5. 左右导航按钮,以及分页

示例:http://www.bbc.co.uk - 顶部的主横幅

我在网上看了看,我尝试了以下方法:

flexslider - 非常好,满足除第 3 点之外的所有要求。但不知道如何使其响应。

轨道 slider - 不错,但 flexslider 更容易设计样式。

注意:此横幅不会在移动设备上使用。

最佳答案

您似乎没有得到任何答案,因为没有完美的解决方案。 如果您了解一些 CSS,更改上述任何 slider 并使它们具有响应性并不难。我建议,根据你想做多少这些作品,你试一试。您可以在线找到很好的免费教程。

不过我发现了这个插件,值得一试:http://marktyrrell.com/labs/blueberry/

还有一些:http://webdesignledger.com/resources/8-responsive-jquery-slider-plugins

关于javascript - jQuery 响应式横幅自动调整图像和内容的大小以适应空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11485445/

相关文章:

javascript - 自定义 Chart.js 故障排除

javascript - 如何使用jquery追加和删除div下的所有元素

jquery 动画 css 样式不起作用

html - 如何正确使用@media 查询?

javascript - 如何确保以特定顺序调用的 AJAX 请求以相同的顺序获得响应?

javascript - 如何将单个对象的对象转换为对象数组?

javascript - 如何使用 Angular2 在单击时切换选项卡并更改 css 类?

javascript - 当第一张幻灯片处于事件状态时,如何将 'first-slide-active' 类应用于 Slick 轮播容器?

twitter-bootstrap - 使 PNG 标志变大

html - 固定表格上的列并防止它在 IE7 中看起来很糟糕