I have the below html code which has the current image in the first div and the second div has multiple images placed horizontally.
class="container">
<div class="column">
<h3>Vanilla JS Slider</h3>
<h4 class="arrows"><span class="prev">←</span><span> All Kittens </span><span class="next">→</span></h4>
<img id="display" src="C:
amedimagesimg.jpg" marginheight="0" marginwidth="0" />
</div>
<div id="content">
<img src="C:
amedimagesimg1.jpg" alt="Georges" class="images" />
<img src="C:
amedimagesimg2.jpg" alt="Gers" class="images" />
<img src="C:
amedimagesimg3.jpg" alt="Providence" class="images" />
<img src="C:
amedimagesimg4.jpg" alt="Providence" class="images" />
<img src="C:
amedimagesimg5.jpg" alt="Providence" class="images" />
</div>
Jquery code- This is my function but upon clicking on perv and next buttons i am unable to see the next images which should come.
const leftArrow = document.querySelector('.prev');
const rightArrow = document.querySelector('.next');
const imageGallery = document.querySelectorAll("#content img");
const displayImg = document.querySelector("#display");
let activeImageIndex = 0;
window.addEventListener('load', renderSlider);
leftArrow.addEventListener('click', handlePrev);
window.addEventListener('keyup', handlePrev);
rightArrow.addEventListener('click', handleNext);
window.addEventListener('keyup', handleNext);
imageGallery.forEach((image, index) => {
image.addEventListener('click', () => {
activeImageIndex = index;
renderDisplayImage(activeImageIndex);
setActiveClass(activeImageIndex);
if(index === 0) leftArrow.style.display = 'none';
else leftArrow.style.display = 'block';
})
})
function renderDisplayImage(imageIndex) {
displayImg.setAttribute('src', urls[imageIndex]);
}
function renderSlider() {
renderDisplayImage(activeImageIndex);
imageGallery.forEach((img, index) => {
img.setAttribute('src', urls[index]);
if(index === 0) img.classList.add('active');
})
}
function handlePrev(event) {
if(event.type === 'keyup' && event.key !== 'ArrowLeft') return;
activeImageIndex = (urls.length + (activeImageIndex-1)) % urls.length;
renderDisplayImage(activeImageIndex);
setActiveClass(activeImageIndex);
if(activeImageIndex === 0) leftArrow.style.display = 'none';
else leftArrow.style.display = 'block';
}
function handleNext() {
if(event.type === 'keyup' && event.key !== 'ArrowRight') return;
activeImageIndex = (activeImageIndex+1) % urls.length;
renderDisplayImage(activeImageIndex);
setActiveClass(activeImageIndex)
if(activeImageIndex > 0) leftArrow.style.display = 'block';
else leftArrow.style.display = 'none';
}
function setActiveClass(imageIndex) {
imageGallery.forEach((image, index) => {
if(index === imageIndex) image.classList.add('active');
else image.classList.remove('active');
})
}
CSS- Below is the CSS for Perv and Next Images
.column {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.column img {
width: 50%;
}
.arrows {
display: flex;
}
.prev, .next {
cursor: pointer;
}
.prev {
display: none;
}
#content {
width: 100%;
display: flex;
margin-top: 20px;
}
#content img {
width: 20%;
}
#content img.active {
width: 20%;
border: 2px solid red;
}
.prev, .next, .column {
user-select: none;
}