I need some guidance in web development as I am new to it. My goal is to create a basic slider using JQuery, but I encountered an issue with slide3. It remains visible while moving across the screen when transitioning to left:0. I'm unsure of what went wrong and would appreciate any insights!
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>If you have any suggestions or solutions, please feel free to share them. Thank you!
Best regards!