具有响应高度和宽度的 jQuery Cycle2 幻灯片答案

【问题标题】：jQuery Cycle2 slideshow with responsive height, as well as width具有响应高度和宽度的 jQuery Cycle2 幻灯片
【发布时间】：2013-03-23 19:54:23
【问题描述】：

我正在尝试使用 jQuery Cycle2 插件创建一个图像幻灯片，该插件将响应，调整到浏览器宽度和高度。我能够使用Auto Height 功能中的Dynamic Container Sizing 文档来使宽度正常工作。

查看我制作的小提琴here，这是我正在处理的网站构建的简化表示。

是否有可能以某种方式为幻灯片提供max-height:100%; 的.cycle-slideshow div？

一般来说，我面临的问题是长肖像图像并不真正适合我的网站设计，用户必须滚动才能看到完整的图像，这并不好。

非常感谢。

【问题讨论】：

标签： jquery html css responsive-design jquery-cycle

【解决方案1】：

这个有点晚了，但我会试一试。

假设所有图像的高度不同：这是一个小技巧，即使使用不同尺寸的图像，也可以始终保持容器大小相同。

伪术语：

让您的图片成为幻灯片的“背景”，而不是放置在其中。
在 CSS 中添加一个 {background-size:cover}。
使用 Cycle2 的自定义模板来启动它。（黑客？嗯，不是真的）

让我们获得一些新的 CSS 规则：

.cycle-overlay {
    position:absolute;
    bottom:auto;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    background:#333;
    padding:0;
    opacity:1
}
.banner-background {
    width:100%;
    height:100%;
    background-position:center;
    background-size:cover;
    position:absolute;
    top:0;
    left:0;
    z-index:10;
}
.cycle-slideshow {
    width:100%;
    max-height:400px;
    background-position:center;
    background-size:cover;
    color:#fff;
    overflow:hidden;
}

HTML

<div class="cycle-slideshow" 
  data-cycle-slides='li' 
  data-cycle-fx='scrollHorz' 
  data-cycle-speed='700' 
  data-cycle-timeout='7000'    
  data-cycle-overlay-template="<div class=banner-background style=background-image:url(http://domain.tld/images/{{background}})></div>" 
>
    <ul>
       <li data-cycle-background="slide1.jpg"></li>
       <li data-cycle-background="slide2.jpg"></li>
       <li data-cycle-background="slide3.jpg"></li>
    </ul>
    <div class="cycle-overlay"></div>
        </div>

$('.cycle-slideshow').on('cycle-before', function (opts) {
    var slideshow = $(this);
    var img = slideshow.find('.banner-background').css('background-image');
    slideshow.css('background-image', img);
});

假设所有图像的高度相同：几个月前我写了一个关于将 animate.css 与 Cycle2 集成的示例

这不是您要寻找的，但该示例提供了全角自动高度解决方案。

查看代码，你会得到你需要的。

小提琴here!

另外，请记住Cycle2 您需要将额外的插件添加到幻灯片中心jquery.cycle2.center.js

希望这会有所帮助，干杯！

【讨论】：