There is a slider with 3 modals set to appear at intervals, covering the slides with gradients. When a user clicks on a slide, the autoplay stops and allows them to select any image they want.
The issue is that the modals continue to appear and disappear based on the timer interval. How can I make each modal display without fading in and out once the user interacts with the previous or next arrow?
In this scenario, the "HI", "HOW", "ARE YOU?" messages would stay fully displayed in their respective sliders and not fade in and out anymore after the user clicks on either of the arrows.
$(document).ready(function() {
$(".myModal").delay(3000).fadeIn().hide();
$(".myModal2").delay(6000).fadeIn().hide();
$(".myModal3").delay(9000).fadeIn().hide();
});
$(document).ready(setInterval(function() {
$(".myModal").delay(3000).fadeIn().hide();
$(".myModal2").delay(6000).fadeIn().hide();
$(".myModal3").delay(9000).fadeIn().hide();
},12000));
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
//cycleItems function
function cycleItems(){
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display', 'inline-block');
}; //end cycleItems function
//begin autoSlide function
var autoSlide = setInterval(function() {
currentIndex ++;
if( currentIndex > itemAmt -1){
currentIndex = 0;
}
cycleItems();
},3000)
//end autoSlide function
//Next slider code
$('.next').click(function () {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt - 1){
currentIndex = 0;
}
cycleItems();
});
//Previous slider code
$('.prev').click(function(){
clearInterval(autoSlide);
currentIndex -= 1;
if(currentIndex < 0){
currentIndex = itemAmt - 1;
}
cycleItems();
});.container {
width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
overflow: hidden;
}
.container div {
width: 100%;
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
}
button {
position: absolute;
}
.next {
right: 5px;
cursor: pointer;
position: absolute;
background-image: url('https://image.freepik.com/free-icon/arrow-bold-right-ios-7-symbol_318-35504.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100px;
height: 100px;
z-index: 500;
top: 50%;
}
.prev {
left: 5px;
cursor: pointer;
position: absolute;
background-image: url('https://image.flaticon.com/icons/svg/17/17264.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100px;
height: 100px;
z-index: 500;
top: 50%;
}
.image2 {
background-image: url('https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png');
background-position:center;
display: block;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.image3 {
background-image: url('https://static.comicvine.com/uploads/square_small/11/114183/5147875-lisa_simpson.png');
background-position:center;
display: block;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.image4 {
background-image: url('https://vignette2.wikia.nocookie.net/simpsons/images/a/ab/BartSimpson.jpg/revision/latest?cb=20141101133153');
background-position:center;
display: block;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.image1 {
background-image: url('http://media.oregonlive.com/ent_impact_music/photo/9905096-large.jpg');
background-size: contain;
background-position:center;
display: block;
background-repeat: no-repeat;
width: 100%;
height: 100%;
z-index: 200;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container image1">
<div class="image1"></div>
<div class="image2">
<section class="myModal">HI</section>
</div>
<div class= "image3">
<section class="myModal2">HOW</section>
</div>
<div class="image4">
<section class="myModal3">ARE YOU?</section>
</div>
</div>
<div class="next"></div>
<div class="prev"></div>