How to make modal appear on click and no longer fade in and out of slider?

Question

So I have a slider that has 3 modals. The modals are set to an interval where they come in with a gradient and cover the slide. Once the user clicks on the slide, the autoplay feature stops and they can select any image they want.

The problem is, the modals keep on with the same interval and pop in and out according to the timer. How can I make each modal display without fading in and out anymore once the user clicks on either previous or next arrow?

So in this example, the "HI", "HOW", "ARE YOU?" would be fully displayed in each of their sliders and would no longer fade in and out once the user clicked on either one 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> 

Answer 1

You are double defining the auto slide functionality. Here is an example with the auto and manual slider merged together to work correctly.

 $(document).ready(function() { var currentIndex = 0; var items = $('.container div'); var itemAmt = items.length; //cycleItems function function cycleItems(direction, fade) { currentIndex += direction; if (currentIndex > itemAmt - 1) { currentIndex = 0; } else if (currentIndex < 0) { currentIndex = itemAmt - 1; } var item = items.eq(currentIndex); items.hide(); if (fade) { item.fadeIn(); } else { item.show(); } }; //end cycleItems function // start autoSlide cycleItems(1, true); var autoSlideInterval = setInterval(cycleItems, 3000, 1, true); //Next slider code $('.next').click(function() { clearInterval(autoSlideInterval); cycleItems(1, false); }); //Previous slider code $('.prev').click(function() { clearInterval(autoSlideInterval); cycleItems(-1, false); }); }); 

 .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%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container image"> <div class="image1"> <br> </div> <div class="image2"> <section class="myModal2">HI</section> </div> <div class="image3"> <section class="myModal3">HOW</section> </div> <div class="image4"> <section class="myModal4">ARE YOU?</section> </div> </div> <div class="next"></div> <div class="prev"></div>