JavaScript button next and prev

Question

I have made an image gallery but then decided to add buttons Previous and Next so it will show Previous and Next Image but it doesn't work and have been loking where's the problem but cannot find the problem, because Console.Log doesn't show any errors too. Can anyone take a look at the code below and try to solve it ? Thanks :::

 let modal = document.querySelector('.modal'); let images = document.querySelectorAll('img'); let modalImg = document.getElementById('img01'); let prevBtn = document.querySelector('.img-left'); let nextBtn = document.querySelector('.img-right'); let i = 0; window.addEventListener('click', outsideClick); prevBtn.onclick = function () { slide[i].classList.remove('active'); i--; if (i < 0) { i = slide.length - 1; } slide[i].classList.add('active'); } nextBtn.onclick = function () { slide[i].classList.remove('active'); i++; if(i >= slide.length) { i = 0; } slide[i].classList.add('active'); } function outsideClick(e) { if(e.target === modal) { modal.style.display = 'none'; } } for (let i = 0; i < images.length; i++) { let img = images[i]; img.onclick = function(e) { modal.style.display = 'block'; modalImg.src = this.src; } } 

 .container{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 4px; align-items: center; padding-left: 370px; } .grids2{ grid-column: 2; grid-row: 2; } .grids3{ grid-column: 2; grid-row: 2/1; } .grids4{ grid-column: 1; grid-row: 2; } .grids5{ grid-column: 2; grid-row: 2; } img{ width: 410px; height: 290px; cursor: pointer; } .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 150px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */ } .modal-content { margin: auto; display: block; width: 600px; height: 400px; max-width: 700px; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; color:red; } .img-right{ position: absolute; left: 72%; top: 36%; cursor: pointer; background-color:yellowgreen; font-size: 48px; transition: 0.2s; width: 96px; height: 90px; } .img-left{ position: absolute; right: 72%; top: 36%; cursor: pointer; font-size: 48px; background-color:yellowgreen; transition: 0.2s; width: 96px; height: 90px; } .img-left:hover{ transform: scale(1.2) } .img-right:hover{ transform: scale(1.2) } /*End of Slideshow*/ 

  <div class="container"> <div class="grid2s"> <img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg"> </div> <div class="grids3"> <img src="https://s3.amazonaws.com/tinycards/image/009ffb0bab62af8a498d2493c1dfd927"> </div> <div class="grids4"> <img src="https://ichef.bbci.co.uk/childrens-responsive-ichef-live/r/880/1x/cbbc/Animaltastic_Ambigous_Animals_Names_1024_576.jpg"> </div> <div class="grids5"> <img src="https://ichef.bbci.co.uk/images/ic/976x549/p04f5x5v.jpg"> </div> </div> <div class="modal"> <img class="modal-content animated fadeIn" id="img01"> <img class="img-left" src="https://image.flaticon.com/icons/svg/467/467282.svg"> <img class="img-right" src="https://image.flaticon.com/icons/svg/467/467274.svg"> </div> 

Answer 1

let images = document.querySelectorAll('img');
// Don't include arrows in array of pictures for slider !
let images = document.querySelectorAll('.container img');

Then... the slide array you use in click function is not defined. I think images and slide var should be the same.

And then, all is working as expected: the .active class jump over each image each time prev or next button is clicked.

At last, you just require to update modal content, like:

modalImg.src = slide[i].src;

 let modal = document.querySelector('.modal'); let slide = document.querySelectorAll('.container img'); let modalImg = document.getElementById('img01'); let prevBtn = document.querySelector('.img-left'); let nextBtn = document.querySelector('.img-right'); let i = 0; window.addEventListener('click', outsideClick); prevBtn.onclick = function () { slide[i].classList.remove('active'); i--; if (i < 0) { i = slide.length - 1; } modalImg.src = slide[i].src; slide[i].classList.add('active'); } nextBtn.onclick = function () { slide[i].classList.remove('active'); i++; if(i >= slide.length) { i = 0; } modalImg.src = slide[i].src; slide[i].classList.add('active'); } function outsideClick(e) { if(e.target === modal) { modal.style.display = 'none'; } } for (let i = 0; i < slide.length; i++) { let img = slide[i]; img.onclick = function(e) { modal.style.display = 'block'; modalImg.src = this.src; } } 

 .container{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 4px; align-items: center; padding-left: 370px; } .grids2{ grid-column: 2; grid-row: 2; } .grids3{ grid-column: 2; grid-row: 2/1; } .grids4{ grid-column: 1; grid-row: 2; } .grids5{ grid-column: 2; grid-row: 2; } img{ width: 410px; height: 290px; cursor: pointer; } .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 150px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */ } .modal-content { margin: auto; display: block; width: 600px; height: 400px; max-width: 700px; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; color:red; } .img-right{ position: absolute; left: 72%; top: 36%; cursor: pointer; background-color:yellowgreen; font-size: 48px; transition: 0.2s; width: 96px; height: 90px; } .img-left{ position: absolute; right: 72%; top: 36%; cursor: pointer; font-size: 48px; background-color:yellowgreen; transition: 0.2s; width: 96px; height: 90px; } .img-left:hover{ transform: scale(1.2) } .img-right:hover{ transform: scale(1.2) } /*End of Slideshow*/ 

 <div class="container"> <div class="grid2s"> <img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg"> </div> <div class="grids3"> <img src="https://s3.amazonaws.com/tinycards/image/009ffb0bab62af8a498d2493c1dfd927"> </div> <div class="grids4"> <img src="https://ichef.bbci.co.uk/childrens-responsive-ichef-live/r/880/1x/cbbc/Animaltastic_Ambigous_Animals_Names_1024_576.jpg"> </div> <div class="grids5"> <img src="https://ichef.bbci.co.uk/images/ic/976x549/p04f5x5v.jpg"> </div> </div> <div class="modal"> <img class="modal-content animated fadeIn" id="img01"> <img class="img-left" src="https://image.flaticon.com/icons/svg/467/467282.svg"> <img class="img-right" src="https://image.flaticon.com/icons/svg/467/467274.svg"> </div>