jQuery Cycle2幻燈片具有響應高度，以及寬度

我想創建一個圖片幻燈片使用jQuery Cycle2插件，將響應，調整到瀏覽器寬度和高度。我能夠使用Auto Height功能中的Dynamic Container Sizing文檔來獲得寬度。jQuery Cycle2幻燈片具有響應高度，以及寬度

看到我製作的小提琴here，這是我正在研究的網站構建的簡化表示。

是否有可能以某種方式給幻燈片.cycle-slideshow div的max-height:100%;？

從廣義上講，我面臨的問題是長的人像圖像並不適合我的網站的設計，用戶必須滾動才能看到完整的圖像，這並不是很棒。

非常感謝。

來源

2013-04-02 Sam Baldwin

有點晚，但我會給它一個鏡頭。

假設你所有的圖像都不是相同的高度：這是一個小技巧，即使使用不同尺寸的圖像，始終保持容器的大小相同。

僞條款：

讓您的圖片幻燈片，而不是定位於的「背景」。
向CSS添加{background-size：cover}。
使用Cycle2的自定義模板來啓動此功能。（破解EHH，不是真的？）

讓我們得到一些新的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); 
});

假設所有的圖像都具有相同的高度：我寫了一個例子幾個月前關於與Cycle2

整合animate.css這是不是你在找什麼，但例如提供全寬自動高度解決方案。

檢查代碼，你會得到你所需要的。

小提琴here！

另外，記得Cycle2 你需要額外的插件添加到幻燈片中心jquery.cycle2.center.js

希望這有助於，乾杯！

來源

2013-08-21 05:03:16

jQuery Cycle2幻燈片具有響應高度，以及寬度

回答

相關問題