Auto ImageSlider Not Working with SetInterval() - JavaScript/JQuery

Question

Problem: Want to create a simple javascript/jquery auto image slider, but something doesn't seem to work.

 // jquery // $(document).ready(function() { $("#imgSlider_img1").show(); $("#imgSlider_img2").hide(); $("#imgSlider_img3").hide(); $("#imgSlider_img4").hide(); }) // slider // var current_image_number = 1; function slider() { if (current_image_number == 1) { $("#imgSlider_img1").hide(); $("#imgSlider_img2").show('fast'); $("#imgSlider_img3").hide(); $("#imgSlider_img4").hide(); current_image_number = 2; } if (current_image_number == 2) { $("#imgSlider_img1").hide(); $("#imgSlider_img2").hide(); $("#imgSlider_img3").show('fast'); $("#imgSlider_img4").hide(); current_image_number = 3; } if (current_image_number == 3) { $("#imgSlider_img1").hide(); $("#imgSlider_img2").hide(); $("#imgSlider_img3").hide(); $("#imgSlider_img4").show('fast'); current_image_number = 4; } if (current_image_number == 4) { $("#imgSlider_img1").show('fast'); $("#imgSlider_img2").hide(); $("#imgSlider_img3").hide(); $("#imgSlider_img4").hide(); current_image_number = 1; } } window.setInterval(slider, 4000); 

 .imgSlider { height: 500px; margin-left: 10%; margin-right: 10%; margin-top: 10px; box-shadow: 5px 5px 5px #333; } .imgSlider img { width: 100%; height: 100%; } 

 <div class="imgSlider"> <img id="imgSlider_img1" src="images/index/imgSlider_img1.png"> <img id="imgSlider_img2" src="images/index/imgSlider_img2.jpg"> <img id="imgSlider_img3" src="images/index/imgSlider_img3.jpg"> <img id="imgSlider_img4" src="images/index/imgSlider_img4.jpg"> </div> 

Logic: I want to make a simple auto slider using the current html scheme. I want to be able to either increment inside the 'imgSlider' div or change images through ID's (like the current one). But the problem is that after each interval, all the images get displayed.

Any help is appreciated!

Answer 1

With 4 if's , all the if's are executed. So, let us say at the entry point the value of index is 1 . It will be true for first if and it will set the index to 2 . Now, second if condition also becomes true and it will set index to 3. And so on till it resets the value back to 1.

Hence, in place of 4 if's you need to use if else

 // jquery // $(document).ready(function(){ $("#imgSlider_img1").show(); $("#imgSlider_img2").hide(); $("#imgSlider_img3").hide(); $("#imgSlider_img4").hide(); }) // slider // var current_image_number = 1; function slider() { if (current_image_number == 1) { $("#imgSlider_img1").hide(); $("#imgSlider_img2").show('fast'); $("#imgSlider_img3").hide(); $("#imgSlider_img4").hide(); current_image_number = 2; } else if (current_image_number == 2) { $("#imgSlider_img1").hide(); $("#imgSlider_img2").hide(); $("#imgSlider_img3").show('fast'); $("#imgSlider_img4").hide(); current_image_number = 3; } else if (current_image_number == 3) { $("#imgSlider_img1").hide(); $("#imgSlider_img2").hide(); $("#imgSlider_img3").hide(); $("#imgSlider_img4").show('fast'); current_image_number = 4; } else if (current_image_number == 4) { $("#imgSlider_img1").show('fast'); $("#imgSlider_img2").hide(); $("#imgSlider_img3").hide(); $("#imgSlider_img4").hide(); current_image_number = 1; } } window.setInterval(slider, 4000); 

 .imgSlider { height: 500px; margin-left: 10%; margin-right: 10%; margin-top: 10px; box-shadow: 5px 5px 5px #333; } .imgSlider img { width: 100%; height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="imgSlider"> <img id="imgSlider_img1" alt="imgSlider_img1" src="images/index/imgSlider_img1.png"> <img id="imgSlider_img2" alt="imgSlider_img2" src="images/index/imgSlider_img2.jpg"> <img id="imgSlider_img3" alt="imgSlider_img3" src="images/index/imgSlider_img3.jpg"> <img id="imgSlider_img4" alt="imgSlider_img4" src="images/index/imgSlider_img4.jpg"> </div> 

You can further simplify your code to following

 // jquery // $(document).ready(function(){ $(".imgSlider > img").hide(); // hide all images $("#imgSlider_img1").show(); // show 1st image }); var current_image_number = 1; function slider() { $(".imgSlider > img").hide(); // hide all images current_image_number = ++current_image_number > 4 ? 1 : current_image_number; // calculate the next image $("#imgSlider_img" + current_image_number).show('fast'); // show the image } window.setInterval(slider, 4000); 

 .imgSlider { height: 500px; margin-left: 10%; margin-right: 10%; margin-top: 10px; box-shadow: 5px 5px 5px #333; } .imgSlider img { width: 100%; height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="imgSlider"> <img id="imgSlider_img1" alt="imgSlider_img1" src="images/index/imgSlider_img1.png"> <img id="imgSlider_img2" alt="imgSlider_img2" src="images/index/imgSlider_img2.jpg"> <img id="imgSlider_img3" alt="imgSlider_img3" src="images/index/imgSlider_img3.jpg"> <img id="imgSlider_img4" alt="imgSlider_img4" src="images/index/imgSlider_img4.jpg"> </div> 

Answer 2

I've simplified your JS logic a bit to make it more clear what's going on. The simplified JS will also allow you to add or remove images from your HTML without having to touch your JS:

 // all images var images = document.querySelectorAll('.imgSlider img'); // currently active number var active = 1; // slider function activate() { for (var i=0; i<images.length; i++) { images[i].style.display = 'none'; } // display the active image; document.querySelector('#imgSlider_img' + active).style.display = 'block'; // increment the active image number active++; if (active > images.length) active = 1; } window.setInterval(activate, 3000); activate(); 

 .imgSlider { height: 500px; margin-left: 10%; margin-right: 10%; margin-top: 10px; box-shadow: 5px 5px 5px #333; position: relative; } .imgSlider img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } 

 <div class="imgSlider"> <img id="imgSlider_img1" src="https://placeimg.com/640/480/1.jpg"> <img id="imgSlider_img2" src="https://placeimg.com/640/480/2.jpg"> <img id="imgSlider_img3" src="https://placeimg.com/640/480/3.jpg"> <img id="imgSlider_img4" src="https://placeimg.com/640/480/4.jpg"> </div> 

To make this work, you needed to increment the integer that stores the currently active image. You want to do that inside the function that changes the images.

When you increment that active image number, you also should check if the incremented number is greater than the max number of images. If so, you should set the active image number to 1.

That's all there is to it!

Answer 3

If many images occurs means if condition which is stated above deals with problem. So i have suggested to use below type of JavaScript image slider.

 var _imgPath = { "imageDetails": [{ "Id": "F0001", "Name": "figure1.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png' }, { "Id": "F0002", "Name": "figure2.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png' }, { "Id": "F0003", "Name": "figure3.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/baboon.png' }, { "Id": "F0004", "Name": "figure4.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/barbara.png' }, { "Id": "F0005", "Name": "figure5.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/boat.png' }, { "Id": "F0006", "Name": "figure6.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/cat.png' }, { "Id": "F0007", "Name": "figure7.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/fruits.png' }, { "Id": "F0008", "Name": "figure8.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/frymire.png' }, { "Id": "F0009", "Name": "figure9.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/girl.png' }, { "Id": "F00010", "Name": "figure10.jpg", "Src": 'https://homepages.cae.wisc.edu/~ece533/images/monarch.png' } ] } var currentImage, LastImage; function initLoader(arg_imgPath) { if (arg_imgPath.imageDetails.length > 0) { sliderImgTag.src = arg_imgPath.imageDetails[0]['Src']; sliderImgTag.setAttribute('cid', arg_imgPath.imageDetails[0]['Id']); sliderImgTag.setAttribute('alt', arg_imgPath.imageDetails[0]['name']); currentImage = 0; document.querySelector('.Prod_Arrow.left').style.visibility = "hidden" } document.querySelector('.Prod_Arrow.right').addEventListener('click', function () { btnArrowShift((currentImage + 1), true); }) document.querySelector('.Prod_Arrow.left').addEventListener('click', function () { btnArrowShift((currentImage - 1), false); }) } initLoader(_imgPath); document.querySelector('.Prod_Arrow.right').addEventListener('click', function () { btnArrowShift((currentImage + 1), true); }) document.querySelector('.Prod_Arrow.left').addEventListener('click', function () { btnArrowShift((currentImage - 1), false); }) function btnArrowShift(value, types) { if (types) { if (value != _imgPath.imageDetails.length) { document.querySelector('.Prod_Arrow.left').style.visibility = "visible" sliderImgTag.src = _imgPath.imageDetails[value]['Src']; sliderImgTag.setAttribute('cid', _imgPath.imageDetails[value]['Id']); sliderImgTag.setAttribute('alt', _imgPath.imageDetails[value]['name']); currentImage = value; if (value === (_imgPath.imageDetails.length - 1)) { document.querySelector('.Prod_Arrow.right').style.visibility = "hidden"; } } } else { if (value != _imgPath.imageDetails.length) { document.querySelector('.Prod_Arrow.right').style.visibility = "visible" sliderImgTag.src = _imgPath.imageDetails[value]['Src']; sliderImgTag.setAttribute('cid', _imgPath.imageDetails[value]['Id']); sliderImgTag.setAttribute('alt', _imgPath.imageDetails[value]['name']); currentImage = value; if (value === 0) { document.querySelector('.Prod_Arrow.left').style.visibility = "hidden"; } } } } setInterval(function () { if (currentImage != _imgPath.imageDetails.length) { if (currentImage === (_imgPath.imageDetails.length - 1)) { currentImage = 0; document.querySelector('.Prod_Arrow.right').style.visibility = "visible"; document.querySelector('.Prod_Arrow.left').style.visibility = "hidden"; } else if(currentImage === (0)) { currentImage = currentImage + 1; document.querySelector('.Prod_Arrow.left').style.visibility = "visible"; } else if(currentImage !== (0)){ currentImage = currentImage + 1; document.querySelector('.Prod_Arrow.left').style.visibility = "visible"; } sliderImgTag.src = _imgPath.imageDetails[currentImage]['Src']; sliderImgTag.setAttribute('cid', _imgPath.imageDetails[currentImage]['Id']); sliderImgTag.setAttribute('alt', _imgPath.imageDetails[currentImage]['name']); } }, 5000) 

 @import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700"); /* font-family: 'Nunito', sans-serif; */ :after, :before, * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *::selection { background: transparent; } .Prod-dialog * { font-family: "Nunito", sans-serif; } .Prodclear { clear: both; } .Prod-pull-right { float: right !important; } .Prod-pulk-left { float: left !important; } .Prod-col-4 { width: 45%; float: left; padding: 0px 15px; } .Prod-col-8 { width: 55%; float: left; padding: 0px 15px 0px 30px; } /* dialog start */ .Prod-dialog.active { visibility: visible; position: fixed; background: rgb(33, 32, 32); left: 0px; right: 0px; bottom: 0px; top: 0px; transition: all 0.5s; padding: 30px; z-index: 99999; } .Prod-container { max-width: 1440px; background: #fff; margin: auto; /* box-shadow: 0px 0px 15px #ffffff; */ padding: 0px; margin-top: 50px; max-height: calc(100vh - 90px); overflow-y: auto; background: linear-gradient(to right, white 44%, #f9fafb 44%); } .Prod-Gallery-footer .Prod-col-8 { padding-right: 0px; } /* width */ .Prod-container::-webkit-scrollbar, .Prod_slider::-webkit-scrollbar { width: 10px; height: 10px; } /* Track */ .Prod-container::-webkit-scrollbar-track, .Prod_slider::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ .Prod-container::-webkit-scrollbar-thumb, .Prod_slider::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } /* Handle on hover */ .Prod-container::-webkit-scrollbar-thumb:hover { background: #555; } .Prod-scroll-hidden { overflow: hidden; } #Prod-dialog-close { position: absolute; right: 40px; top: 15px; width: 40px; height: 40px; opacity: 1; background: #fff; border-radius: 50%; } #Prod-dialog-close:hover { opacity: 1; } #Prod-dialog-close:before, #Prod-dialog-close:after { position: absolute; left: 19px; content: " "; height: 24px; width: 2px; background-color: #212020; z-index: 4; /* z-index: 888; */ top: 9px; } #Prod-dialog-close:before { transform: rotate(45deg); } #Prod-dialog-close:after { transform: rotate(-45deg); } /* dialog end */ /* header start */ .Prod-header h2 { color: #252525; font-size: 26px; font-weight: 700; line-height: 33px; text-align: left; position: relative; margin: 0px 0px 25px 0px; padding: 0px 0px 15px 0px; } .Prod-header h2:before { position: absolute; content: ""; width: 65px; height: 3px; background: #fa7000; bottom: 0px; } /* header end*/ /* footer start */ .Prod-footer { padding: 15px; background: #fff; } .Prod-footer p { color: #6a7070; font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; margin: 0px; } .Prod-footer pa { color: #6a7070; text-decoration: none; } /* footer end */ /* form start*/ .Prod-invoice-sec { max-width: 994px; margin: auto; /* background: #f1f1f1; background: linear-gradient(to right, white 40%, #f9fafb 40%); */ margin-bottom: 0px; padding-bottom: 0px; padding: 30px; border-bottom: 1px solid #979797; } .Prod-col-6 { width: 50%; padding: 0px 15px; float: left; } .Prod-row { margin: 0px -15px; } .Prod-form-row { margin-bottom: 15px; } .Prod-form-row label { color: #9b9b9b; font-size: 16px; font-weight: 600; line-height: 19px; } .Prod-form-row p { color: #252525; font-size: 16px; font-weight: 600; line-height: 22px; margin: 0px; } /* form end*/ /* Gallery Start */ .Prod-Gallery { margin: 15px 0px; } .Prod-Gallery-Header { position: relative; border-bottom: 1px solid #979797; padding-bottom: 8px; } .Prod-Gallery-Header h2 { color: #6a7070; font-size: 16px; font-weight: 900; line-height: 19px; margin: 0px; padding: 10px 0px; display: inline-block; } .Prod-tabs { margin: 0px; padding: 0px; position: absolute; right: 0px; top: 5px; } .Prod-tabs li { margin: 0px; padding: 0px; display: inline-block; font-size: 16px; line-height: 32px; padding: 0px 8px 0px 8px; position: relative; cursor: pointer; border-radius: 6px; } ul.Prod-tabs img { width: 18px; vertical-align: middle; cursor: pointer; } li#Prod-tab1.active, li#Prod-tab2.active { background: #ddd; } .Prod-Gallery-body { padding: 15px 0px 15px 0px; } /* Gallery Start */ /* Tab Start */ .Prod-tab-link.current { background: #d8d8d8; color: #5b5b5b; } .Prod-tab-link.current { display: inline-block; } .Prod-tab-content { display: none; } .Prod-tab-content.current { display: block; } li#ProdSelectedTab.current { background: transparent; } /* Tab End*/ /* selected */ .Prod-grid-group li { position: relative; } .Prod-grid-group li.selected { position: relative; } .Prod-grid-group li.selected:after { content: ""; display: block; position: absolute; background: rgba(250, 112, 0, 0.6); left: 0px; right: 0px; top: 0px; bottom: 0px; } .Prod-grid-group li.selected:before { content: ""; display: block; width: 18px; height: 30px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); position: absolute; top: 35px; left: 50px; z-index: 1; } .Prod-grid-group { margin: 0px; padding: 0px; margin-left: -15px; } .Prod-grid-group li { margin: 0px; padding: 0px; width: 110px; height: 110px; list-style-type: none; display: inline-block; overflow: hidden; margin-left: 16px; margin-bottom: 16px; border-radius: 5px; } .Prod-grid-group li img { max-width: 100%; } table.Prod-table { border-collapse: collapse; width: 100%; } table.Prod-table tfoot tr td { border-top: 1px solid #979797; border-bottom: 1px solid #979797; padding: 18px 0px; font-size: 18px; } table.Prod-table td, table.Prod-table th { text-align: left; } table.Prod-table tr th, table.Prod-table tr td { padding: 5px 40px 10px 0px; } .Prod-table thead th { font-weight: 700; color: #6a7070; font-size: 16px; } .Prod-table tbody td { font-size: 16px; font-weight: 600; line-height: 22px; text-align: left; color: #252525; } .Prod-table tfoot td { font-weight: 700; color: #252525; font-size: 16px; } .Prod-payment-action { padding: 50px 0px 0px 0px; text-align: right; } .Prod-payment-action button { border: 2px solid #fa7000; opacity: 0.8; border-radius: 5px; display: inline-block; padding: 8px 15px; background: transparent; text-transform: uppercase; color: #fa7000; font-weight: 700; margin-left: 15px; } .Prod-payment-action button:hover { color: #fff; background-color: #fa7000; box-shadow: 0 2px 6px 4px rgba(250, 112, 0, 0.25); } /* slider start */ .Prod_slider { white-space: nowrap; overflow-x: auto; overflow-y: hidden; margin-bottom: 35px; } .lSSlideOuter .lSPager.lSGallery img { width: 100%; } /* slider End */ .Prod_slider ul li { white-space: nowrap; margin-bottom: 0px; } .Prodt-mark { position: relative; width: 20px; height: 20px; border: 1px solid #bfc3c3; float: left; margin-right: 10px; top: 5px; border-radius: 4px; } .Prodt-mark::before { content: ""; display: block; width: 6px; height: 14px; border: solid transparent; border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; top: 0px; left: 6px; z-index: 1; } .Prod-tab-link.current .Prodt-mark { background: #bfc3c3; } .Prod-tab-link.current .Prodt-mark::before { content: ""; display: block; width: 6px; height: 14px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; top: 0px; left: 6px; z-index: 1; } .Prod-Caption { margin: 8px 0px 0px 0px; font-size: 14px; } .newImgViewer { width: 150px; height: 800px; } .Prod_slider { position: relative; } .Prod_Arrow { width: 50px; height: 50px; background: #bfc3c3; border-radius: 50%; position: absolute; cursor: pointer; } .Prod_Arrow.left { left: 0px; top: 45%; } .Prod_Arrow.left::before { position: absolute; content: ""; top: 20px; left: 20px; border: solid #fff; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(135deg); -webkit-transform: rotate(135deg); } .Prod_Arrow.right { right: 0px; top: 45%; } .Prod_Arrow.right::before { position: absolute; content: ""; top: 20px; left: 20px; border: solid #fff; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .Prod-slider-view { text-align: center; position: relative; height: 450px; } .Prod-slider-view img { height: 400px; border-radius: 6px; vertical-align: middle; margin-top: 25px; } .Prod_Selected { width: 50px; height: 50px; position: absolute; top: 30px; right: 200px; border-radius: 4px; } .Prod_Selected[isselected="true"]::before { content: ""; display: block; width: 8px; height: 16px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); position: absolute; top: 15px; left: 20px; z-index: 1; } .Prod_Selected::after { content: ""; display: block; position: absolute; background: #bfc3c3; left: 0px; right: 0px; top: 0px; bottom: 0px; border-radius: 6px; } .allitems li { display: none; } .allitems li.selected { display: inline-block; } #Prod-grid-slider li.isactive { border: 4px solid #fa7000; } #Prod-grid-slider li { border: 4px solid transparent; } #ProdSelectedTab.current span.ProdAllImages { display: none; } span.ProdAllImages { display: none; } .Prod-tab-link.current span.ProdSelectedImg { display: inline-block; } 

 <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" media="screen" href="src/index.css" /> </head> <body> <div class="Prod-dialog"> <div class="Prod-container"> <div class="Prod-invoice-sec"> <div class="Prod-header"> <h2>Slider</h2> </div> <div class="Prod-container-body"> <div class="Prod-Gallery"> <div class="Prod-Gallery-body"> <!--Wrapper to contain interchanging content--> <div class="Prod-tabs-wrapper"> <div id="ProdSliderContent" class="Prod-tab-content current"> <div class="Prod-slider-view"> <img id="sliderImgTag"> <div class="Prod_Arrow left"></div> <div class="Prod_Arrow right"></div> </div> <div class="Prod_slider"> <ul class="Prod-grid-group" id="Prod-grid-slider"> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="Prod-footer"> <p>Prasanna Brabourame</p> <p>Open Source Enthusiasts</p> <p>Place: <a> Puducherry,Pondicherry,INDIA</a> </p> <p>Email: <a href="mailto:prasanna18101994@gmail.com">prasanna18101994@gmail.com</a> </p> </div> </div> <script src="src/index.js"></script> </body> </html>