Image slider custom coding

1

IMG_20240705_225007
IMG_20240705_2250071080×1459 228 KB

What is the custom code for the following image slide r

2

hi @Awais_Shabbir

could you share the reference link?

3

Here is the link for that

4

hi @Awais_Shabbir,

use the following code. do not forget to update image source and index number.

<div class="slider-container">
      <div class="slider">
          <img id="main-slide" src="/imgs/file1.JPG" alt="Slide 1" class="slide">
      </div>
      <div class="thumbnails">
          <img src="/imgs/file1.JPG" alt="Thumb 1" class="thumbnail active" data-index="0">
          <img src="/imgs/file2.JPG" alt="Thumb 2" class="thumbnail" data-index="1">
          <img src="/imgs/file3.JPG" alt="Thumb 3" class="thumbnail" data-index="2">
          <!-- Add more thumbnails here -->
      </div>
      <div class="mobile-controls">
          <button id="prev">Previous</button>
          <span id="counter">1/11</span>
          <button id="next">Next</button>
      </div>
  </div>
<style>
.slider-container {
    position: relative;
    width: 80%;
    margin: auto;
}
.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.slide {
    width: 100%;
    display: block;
}
.thumbnails {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.thumbnail {
    width: 50px;
    height: 50px;
    margin: 0 5px;
    cursor: pointer;
    opacity: 0.6;
}
.thumbnail.active {
    opacity: 1;
}
.mobile-controls {
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
#counter {
    font-size: 1.2em;
}
@media (max-width: 768px) {
    .thumbnails {
        display: none;
    }
    .mobile-controls {
        display: flex;
    }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const mainSlide = document.getElementById('main-slide');
    const thumbnails = document.querySelectorAll('.thumbnail');
    const prevButton = document.getElementById('prev');
    const nextButton = document.getElementById('next');
    const counter = document.getElementById('counter');

    let currentSlide = 0;
    const totalSlides = thumbnails.length;

    function updateSlider(index) {
        mainSlide.src = thumbnails[index].src;
        thumbnails.forEach((thumbnail, i) => {
            thumbnail.classList.toggle('active', i === index);
        });
        counter.textContent = `${index + 1}/${totalSlides}`;
    }

    thumbnails.forEach((thumbnail, index) => {
        thumbnail.addEventListener('click', () => {
            currentSlide = index;
            updateSlider(currentSlide);
        });
    });

    prevButton.addEventListener('click', () => {
        currentSlide = (currentSlide === 0) ? totalSlides - 1 : currentSlide - 1;
        updateSlider(currentSlide);
    });

    nextButton.addEventListener('click', () => {
        currentSlide = (currentSlide === totalSlides - 1) ? 0 : currentSlide + 1;
        updateSlider(currentSlide);
    });

    updateSlider(currentSlide);
});
</script>
1 Like