2014-09-13 115 views
-1

我使用這個滑塊,我發現:過渡效果 - 淡入到幻燈片

Lean Slider

我想知道是否有任何可能改變從消除它的過渡效果頁幻燈片? 我有一個在JavaScript/JQuery的基本知識。 我試圖尋找它,但沒有提到代碼中的「淡入淡出」或「幻燈片」,所以我不知道從哪裏開始。

謝謝。

+0

顯示你的代碼,你到目前爲止嘗試.. – 2014-09-13 08:00:53

回答

0

在此滑塊中,使用css opacity屬性給出淡入淡出效果。

我已經更新了幻燈片效果的CSS。看看這是否有幫助。使用margin代替opacity

.slider-wrapper { 
    position: relative; 
    background: #fff url(images/loading.gif) no-repeat 50% 50%; 
    min-width: 100%; 
    min-height: 100%; 
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.4); 
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4); 
    box-shadow: 0 0 3px rgba(0,0,0,0.4); 
    overflow: hidden; //Added this 
} 
.lean-slider { /* overflow: hidden; */ width: 1000%;} 
.lean-slider-slide { 
    display: block; 
    position: relative; 
    -webkit-transition: margin 0.6s linear; 
    -moz-transition: margin 0.6s linear; 
    -ms-transition: margin 0.6s linear; 
    -o-transition: margin 0.6s linear; 
    transition: margin 0.6s linear; 

    width: 800px; 
    margin-left: -800px; 
} 
.lean-slider-slide.current { margin-left: 0; } 
+0

謝謝!有效!但圖像並沒有平穩交換......一個進去,一個出去不是在同一時間 - 所以我得到了掉期之間的空白背景。 我希望他們能夠排成一排......就像搬運帶一樣移動到一邊。 我該怎麼辦? – 2014-09-13 09:08:10

+0

不確定你只能用CSS實現這一點。這將需要編輯插件。快速建議找到並使用另一個插件,而不是現有的插件。 – karan3112 2014-09-13 09:19:04

+0

會做,謝謝:) – 2014-09-13 09:29:34