jQuery Cycle 2響應w /居中幻燈片

我試圖設置一個使用優秀的Cycle 2 jQuery插件的響應式圖像畫廊。該畫廊將展出肖像和風景圖像。jQuery Cycle 2響應w /居中幻燈片

我使用的是中心幻燈片選項（循環2的中心插件：http://jquery.malsup.com/cycle2/demo/center.php），這似乎導致在WebKit瀏覽器的問題（嘗試調整您的瀏覽器窗口，如果這是第一個看不出來的！）

綠色背景代表循環容器。

不添加中心選項（數據週期中心HORZ =真正的數據週期的中心 - 垂直=真）整個事情是運作良好，請參閱：

我不能工作了解導致中間版本問題的原因。

的CSS代碼上的圖像是相當小：

.cycle-slideshow img { 
    max-height: 100%; 
    max-width: 100%; 
}

含元素的CSS是在這裏

.cycle-slideshow { 
    background: green; 
    display: block; 
    position:absolute; 
    height:auto; 
    bottom:0; 
    top:0; 
    left:0; 
    right:0; 
    margin:20px auto; 
    padding:0; 
    width:80%; 
    }

提前任何幫助非常感謝！

來源

2013-01-15 traummaschine

我不認爲你應該使用大於容器的圖像居中。可能問題在於幻燈片放映是在所有（非常大）圖像加載之前開始的。嘗試將代碼包裝在'$（window）.on（'load'，function（）{...}）'中來繞過這個。 – Blazemonger

在回顧一下你的不合作的例子之後，看起來好像內聯樣式可能會讓你頭疼。這裏是第二圖像（KOY魚）引用的HTML：

<img src="http://www.freeimageslive.com/galleries/nature/animals/pics/nishikigoi.jpg" style="position: absolute; top: 0px; left: 0px; z-index: 99; display: block; margin-left: 205px; opacity: 1;" class="cycle-slide cycle-slide-active">

的事情，這裏要注意將其設置爲205px的margin-left財產。爲了以中心顯示動態或響應圖像，需要一些數學運算。您將需要使用補償來完成此操作。將圖像設置爲left: 50%將使圖像的左側與容器的中間對齊。一旦出現，您將使用寬度的一半爲負的margin-left將圖像放入真正的中心。（例如，如果圖像的寬度爲80px，那麼你可以使用CSS left: 50%; margin-left: -40px;

來源

2013-04-22 19:53:35 MikeZ

獲取週期插件的未壓縮版本： http://malsup.github.io/jquery.cycle2.center.js

改線17（加負載事件列表觸發調整）：

$(window).on('resize orientationchange load', resize);

這將固定在WebKit瀏覽器怪異隨機定心問題

我運。在malsup github上爲此設置了an issue。希望這將很快適用於已發佈的版本。

來源

2014-01-21 21:36:51 squarecandy

這是另一種選擇。

$('.cycle-slideshow').on('cycle-initialized', function(event, opts) {     
    $(window).trigger('resize'); 
});

來源

2014-10-14 14:59:54 ctown4life

jQuery Cycle 2響應w /居中幻燈片

回答

相關問題