JavaScript Gallery Slider

This JavaScript code snippet helps you to create a Gallery Slider. It sets up a slider functionality on a webpage using HTML, CSS, and JavaScript. It selects the slider elements including the slides, previous and next buttons, and dots. It initializes the current slide to be displayed and adds an active class to the corresponding dot. It defines a function to move the slides by updating their transform property. It also adds click event listeners to the previous and next buttons to move the slider in the corresponding direction, and to the dots to allow navigation to specific slides. Finally, it calls the Slider function to initialize the slider.

How to Create JavaScript Gallery Slider

First of all, load the following assets into the head tag of your HTML document.

<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.15.4/css/all.css'>

Create the HTML structure for a gallery slide as follows:

<h2>Image slider</h2>
    <div class="slider">
      <div class="slide">
            <img src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80" alt="Photo1"/>
        </div>
      <div class="slide">
            <img src="https://images.unsplash.com/photo-1619266465172-02a857c3556d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1031&q=80" alt="Photo3"/>
        </div> 
      <div class="slide">
            <img src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80" alt="Photo2"/>
        </div>
      <div class="slide">
            <img src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80" alt="Photo3"/>
        </div> 

        <button class="btn-slide prev"><i class="fas fa-3x fa-chevron-circle-left"></i></button>
        <button class="btn-slide next"><i class="fas fa-3x fa-chevron-circle-right"></i></button>
      
    </div>
    <div class="dots-container">
            <span class="dot active" data-slide="0"></span>
            <span class="dot" data-slide="1"></span>
            <span class="dot" data-slide="2"></span>
      <span class="dot" data-slide="3"></span>
    </div>

Now, style the gallery slide using the following CSS styles:

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
html {
  font-size: 1rem;
  box-sizing: border-box;
}
.cd__main{
display: block !important;
}
body {
  width: 100%;
  height: 100%;
  color: #272727;
  line-height: 1.9;
  background-color: #f7f5f5;
  font-family:Arial, Helvetica, sans-serif;
}
h2{
    text-align: center;
    font-size: 2rem;
    line-height: 3.5;
}
.slider{
    position: relative;
     max-width: 40rem; 
    height: 26.625rem; 
    margin: 0 auto;
    overflow: hidden;
}
.slide{ 
    position: absolute;
    top:0;
    width: 100%;
    height: 26.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 1s;
}
.slide > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
button{
    background: none;
    border: none;
}
button .fas{
    color: rgba(255, 255, 255, .5);
}
.btn-slide{
    position:absolute;
    top:50%;
    z-index: 10;

    height: 5.5rem;
    width: 5.5rem;
    cursor: pointer;
}
.prev{
    left:3rem;
    transform: translate(-50%, -50%);
}
.next{
    right: 3rem;
    transform: translate(50%, -50%); 
}
.dots-container{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.dot{
    width: 25px;
    height: 5px;
    margin: 15px 5px;
    border-radius: .5rem;
    background: rgba(39,39,39, .5);
    cursor: pointer;
}
.dot.active{
background:#272727;
}

Finally, add the following JavaScript function for its effect:

function Slider() {
    const carouselSlides = document.querySelectorAll('.slide');
    const btnPrev = document.querySelector('.prev');
    const btnNext = document.querySelector('.next');
    const dotsSlide = document.querySelector('.dots-container');
    let currentSlide = 0;
  
    const activeDot = function (slide) {
        document.querySelectorAll('.dot').forEach(dot => dot.classList.remove('active'));
        document.querySelector(`.dot[data-slide="${slide}"]`).classList.add('active');
    };
    activeDot(currentSlide);

    const changeSlide = function (slides) {
        carouselSlides.forEach((slide, index) => (slide.style.transform = `translateX(${100 * (index - slides)}%)`));
    };
    changeSlide(currentSlide);

    btnNext.addEventListener('click', function () {
        currentSlide++; 
        if (carouselSlides.length - 1 < currentSlide) {
            currentSlide = 0;
        };
        changeSlide(currentSlide);
        activeDot(currentSlide);
});
    btnPrev.addEventListener('click', function () {
        currentSlide--;
        if (0 >= currentSlide) {
            currentSlide = 0;
        }; 
        changeSlide(currentSlide);
        activeDot(currentSlide);
    });

    dotsSlide.addEventListener('click', function (e) {
        if (e.target.classList.contains('dot')) {
            const slide = e.target.dataset.slide;
            changeSlide(slide);
            activeDot(slide);
        }
    });
  };
Slider();

That’s all! hopefully, you have successfully created the JavaScript gallery slider. If you have any questions or suggestions, feel free to comment below.