过渡效果 - 淡入幻灯片

Question

我正在使用此滑块我发现：

Lean Slider

我想知道是否有可能改变它从FADE到SLIDE的过渡效果？ 我对javascript / JQuery有基本的了解。 我试图寻找它，但没有提到代码中的“淡入淡出”或“滑动”，所以我不知道从哪里开始。

感谢。

Answer 1

在此滑块中，使用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; }