旋轉木馬圖像移動到不正確的地方上單擊事件

Question

真的對不起，如果這已經回答了其他地方，我發現一對夫婦類似的線程，隨後使用位置的建議：絕對的，但仍然無法得到它的工作。

我是新來的網絡編碼，我只是想玩弄建設一些東西，並一直堅持這一點。

基本上我已經創建圖像的旋轉木馬，你點擊下一個箭頭，它需要你有淡出/淡入下一個圖像。

它出色的作品的第一次點擊，但之後，我的下一個圖像移動到我的div的底部，然後彈出備份到每一個地方過渡。

我想我該容器的位置是：相對的，我的圖片的位置是：絕對的，其如果我正確讀取是做正確的方式。

任何人都可以指出哪裏出錯了嗎？

我做了的jsfiddle在這裏 -

https://jsfiddle.net/xf1h05q5/3/

JS的是在這裏：

$('.arrow-next').click(function() { 
    var currentSlide = $('.active-slide'); 
    var nextSlide = currentSlide.next(); 

    var currentDot = $('.active-dot'); 
    var nextDot = currentDot.next(); 

    if(nextSlide.length === 0) { 
     nextSlide = $('.slide').first(); 
     nextDot = $('.dot').first(); 
    }; 
        currentSlide.fadeOut(600).removeClass('active-slide'); 
    nextSlide.fadeIn(600).addClass('active-slide'); 

    currentDot.removeClass('active-dot'); 
    nextDot.addClass('active-dot'); 

}); 

$('.arrow-prev').click(function() { 
    var currentSlide = $('.active-slide'); 
    var prevSlide = currentSlide.prev(); 

    var currentDot = $('.active-dot') 
    var prevDot = currentDot.prev(); 

    if(prevSlide.length === 0) { 
     prevSlide = $('.slide').last() 
     prevDot = $('.dot').last() 

    }; 

    currentSlide.fadeOut(600).removeClass('active-slide'); 
    prevSlide.fadeIn(600).addClass('active-slide'); 

    currentDot.removeClass('active-dot'); 
    prevDot.addClass('active-dot'); 


}); 

和滑塊的CSS：提前爲

.slider { 
    position: relative; 
    width: 100%; 
    height: 240px; 
    border-bottom: 1px solid #777; 
} 

.slide { 
    display: none; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
} 
.active-slide { 
    display: block; 
    position: absolute; 
} 
.slide .container img { 
    width: 200px; 
} 

謝謝幫幫我。

Answer 1

幻燈片類必須有，絕對位置，只需添加到您的.slide：

position: absolute; 

因爲您的幻燈片在滑動條中隱藏時

看看：

https://jsfiddle.net/RomanGroovyDev/xf1h05q5/6/

Answer 2

DEMO

使用匿名callback function添加您fadeIn。總之，fadeIn下一張圖片只有一次active image已經fadeOut。東西如下：

currentSlide.fadeOut(600,function(){ 
    //perform these things once fadeOut is done 
    $(this).removeClass('active-slide'); 
    nextSlide.fadeIn(600).addClass('active-slide'); 
}) 

你修改JS將是如下：

$('.arrow-next').click(function() { 
    var currentSlide = $('.active-slide'); 
    var nextSlide = currentSlide.next(); 
    var currentDot = $('.active-dot'); 
    var nextDot = currentDot.next(); 
    if (nextSlide.length === 0) { 
     nextSlide = $('.slide').first(); 
     nextDot = $('.dot').first(); 
    }; 
    currentSlide.fadeOut(600,function(){ 
     $(this).removeClass('active-slide'); 
     nextSlide.fadeIn(600).addClass('active-slide'); 
    }) 
    currentDot.removeClass('active-dot'); 
    nextDot.addClass('active-dot'); 
}); 

$('.arrow-prev').click(function() { 
    var currentSlide = $('.active-slide'); 
    var prevSlide = currentSlide.prev(); 
    var currentDot = $('.active-dot') 
    var prevDot = currentDot.prev(); 
    if (prevSlide.length === 0) { 
     prevSlide = $('.slide').last() 
     prevDot = $('.dot').last() 
    }; 
    currentSlide.fadeOut(600,function(){ 
    $(this).removeClass('active-slide'); 
    prevSlide.fadeIn(600).addClass('active-slide'); 
}) 
    currentDot.removeClass('active-dot'); 
    prevDot.addClass('active-dot'); 
});