jQuery Cycle2幻灯片,具有响应高度和宽度

Question

我试图创建使用jQuery循环2插件,将响应,调整到浏览器的宽度图像的幻灯片和高度.我能够使用自动高度功能中的动态容器大小调整文档来获得良好的宽度.

看看我在这里制作的小提琴,这是我正在研究的网站构建的简化表示.

是否有可能以某种方式给一个幻灯片max-height:100%;中的.cycle-slideshowDIV？

从广义上讲,我面临的问题是长肖像图像并不真正适合我的网站设计,用户必须滚动才能看到完整的图像,这并不是太棒了.

非常感谢.

Answer 1

这个有点晚了,但我会试一试.

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

伪术语:

1. 使您的图像成为幻灯片的"背景"而不是位于其中.
2. 在CSS中添加{background-size:cover}.
3. 使用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>

JS

$('.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集成的例子

它不是您正在寻找的,但该示例提供了全宽度自动高度解决方案.

查看代码,您将获得所需.

小提琴在这里!

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

希望这会有所帮助,欢呼!