Проблемы с слайдером содержимого JQuery

Question

Я очень новичок в веб-разработке, и я пытаюсь сделать основной слайдер с помощью JQuery. Однако, когда slide3 перемещается влево: 0 он все еще отображается при перемещении по экрану. Я не знаю, что я сделал неправильно, чтобы вызвать это и хотел бы узнать!

var slide1 = "#slide1"; 
 
var slide2 = "#slide2"; 
 
var slide3 = "#slide3"; 
 

 
function slideAnimation(moveOut, moveIn, delay1, delay2) { 
 
    setTimeout(function() { 
 
    $(moveOut).animate({ 
 
     left: '-100%' 
 
    }, 2000); 
 
    $(moveIn).animate({ 
 
     left: '0' 
 
    }, 2000); 
 
    }, delay1); 
 
    setTimeout(function() { 
 
    $(moveOut).hide(); 
 
    $(moveOut).animate({ 
 
     left: '100%' 
 
    }); 
 
    $(moveOut).show(); 
 
    }, delay2); 
 
}; 
 

 
function contentSlider() { 
 
    slideAnimation(slide1, slide2, 5000, 5200); 
 
    slideAnimation(slide2, slide3, 10000, 10200); 
 
    slideAnimation(slide3, slide1, 15000, 15200); 
 
}; 
 

 
$(document).ready(function() { 
 
    contentSlider(); 
 
}); 
 

 
setInterval(function() { 
 
    contentSlider(); 
 
}, 25000);

.index3 { 
 
    height: 482px; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
#contentSlider { 
 
    position: absolute; 
 
    width: 100%; 
 
    min-height: 482px; 
 
    overflow: hidden; 
 
} 
 
.slideArea { 
 
    position: absolute; 
 
    width: 300%; 
 
    left: -100%; 
 
    height: 100%; 
 
    line-height: 400px; 
 
    font-size: 50px; 
 
    text-align: center; 
 
    left: 0; 
 
} 
 
#slide1 { 
 
    background: url(Images/slide1bkg.jpg) center; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    display: block; 
 
    left: 0; 
 
} 
 
#slide2 { 
 
    background: url(Images/slide2bkg.jpg) center; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    display: block; 
 
    left: 100%; 
 
} 
 
#slide3 { 
 
    background: url(Images/slide3bkg.jpg) left; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    display: block; 
 
    left: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="index3"> 
 
    <div id="contentSlider"> 
 
    <!-- slide one content --> 
 
    <div id="slide1" class="slideArea"> 
 
     <h5>Slide 1</h5> 
 
    </div> 
 
    <!-- slide two content --> 
 
    <div id="slide2" class="slideArea"> 
 
     <h5>Slide 2</h5> 
 
    </div> 
 
    <!-- slide three content --> 
 
    <div id="slide3" class="slideArea"> 
 
     <h5>Slide 3</h5> 
 
    </div> 
 
    </div> 
 
    <!-- link to javascript for content slider --> 
 
    <script src="slideshow.js" type="text/javascript"></script> 
 
</section>

Любая помощь или предложения будут с благодарностью, пожалуйста, дайте мне знать, если вам нужно больше информации!

Спасибо!

Answer 1

У вас должно быть hide() при обратном вызове анимации, которая слайд -100% слева.

function slideAnimation(moveOut, moveIn, delay1, delay2) { 
    setTimeout(function() { 
     $(moveOut).animate({left: '-100%'},2000,function(){ $(moveOut).hide();}); 
     $(moveIn).show();  // Added a show() here 
     $(moveIn).animate({left: '0'},2000); 
    }, delay1); 
    setTimeout(function() { 
     //$(moveOut).hide(); 
     $(moveOut).animate({left: '100%'}); 
     //$(moveOut).show(); 
    }, delay2); 
}; 

См Fiddle: https://jsfiddle.net/Bes7weB/xuurk73s/