Image Slider in JavaScript Source Code

This JavaScript source code helps you to create an image slider. It comes with all basic features like slide images with next previous buttons, dots navigation, and slides/images counter. You can easily integrate this code to make a super lightweight image slider.

How to Create Image Slider in JavaScript Source Code

1. First of all, create the HTML structure as follows:

<div class="slider-container">

    <div class="slides fade">
        <div class="slider-numbers">1/4</div>
        <div class="slider-image"><img src="https://image.ibb.co/kpmt3k/background_1.jpg" alt="background_1"></div>
        <div class="slider-caption">Caption 1</div>
    </div> <!-- slider -->

    <div class="slides fade">
        <div class="slider-numbers">2/4</div>
        <div class="slider-image"><img src="https://image.ibb.co/mGxNw5/background_2.jpg" alt="background_2"></div>
        <div class="slider-caption">Caption 2</div>
    </div> <!-- slider -->

    <div class="slides fade">
        <div class="slider-numbers">3/4</div>
        <div class="slider-image"><img src="https://image.ibb.co/gd5gpQ/background_3.jpg" alt="background_3"></div>
        <div class="slider-caption">Caption 3</div>
    </div> <!-- slider -->

    <div class="slides fade">
        <div class="slider-numbers">4/4</div>
        <div class="slider-image"><img src="https://image.ibb.co/jOgXw5/background_4.jpg" alt="background_4"></div>
        <div class="slider-caption">Caption 4</div>
    </div> <!-- slider -->

    <!-- Slider Next and Previous buttons -->
    <a class="prev" onclick="plusIndex(-1)">❮</a>
    <a class="next" onclick="plusIndex(+1)">❯</a>

    <!-- Slider Selection Bullets -->
    <div class="slider-bullets" id="slider-bullets">
        <span class="dots" onclick="currentSlide(1)"></span>
        <span class="dots" onclick="currentSlide(2)"></span>
        <span class="dots" onclick="currentSlide(3)"></span>
        <span class="dots" onclick="currentSlide(4)"></span>
    </div> <!-- Slider Bullets -->

</div>

2. After that, add the following CSS styles to your project:

* {
    box-sizing: border-box;
    font-family: Tahoma, Arial;
    padding: 0px;
    margin: 0px;
}

.slider-container {
    width: 720px;
    margin: auto;
    position: relative;
}

.slider-container .fade {
    animation-name: fade;
    animation-duration: 0.5s;
}

@keyframes fade {
    from {opacity: 0.4}
    to {opacity: 1}
}

.slider-container .slides .slider-numbers {
    position: absolute;
    padding: 15px;
    font-size: 15px;
    color: #FFF
}

.slider-container .slides .slider-caption {
    text-align: center;
    font-size: 20px;
    position: absolute;
    bottom: 15px;
    width: 100%;
    color: #FFF;
    padding: 10px;
}

.slider-container .prev,
.slider-container .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #FFF;
    font-weight: bold;
    padding: 10px;
    font-size: 30px;
    text-decoration: none;
}

.slider-container .next {
    right: 0px;
}

.slider-container .prev:hover{
    background: rgba(0, 0, 0, 0.6);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    cursor: pointer;
}
.slider-container .next:hover {
    background: rgba(0, 0, 0, 0.6);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    cursor: pointer;
}

.slider-container .slider-bullets {
    text-align: center;
}

.slider-container .slider-bullets .dots {
    display: inline-block;
    padding: 5px;
    width: 10px;
    height: 10px;
    background-color: #808080;
    border-radius: 50%;
}

.slider-container .slider-bullets .dots:hover {
    background-color: #383838;
    cursor: pointer;
}

.slider-container .slider-bullets .active {
    background-color: #383838;
}

3. Finally, add the following JavaScript code and done.

var slideIndex = 1;

function showImage(n) { // for Display the first Image
    
    'use strict';
    
    var slide = document.getElementsByClassName('slides'),
        
        dots = document.getElementsByClassName('dots'),
        
        i;
    
    if (n > slide.length) { // to prevent larger values than the slide length
        
        slideIndex = 1;
    }
    
    if (n < 1) { // to avoide negative values
        
        slideIndex = slide.length;
    }
    
    for (i = 0; i < slide.length; i++) { // to make other images dispaly: none
        
        slide[i].style.display = 'none';
    }
    slide[slideIndex - 1].style.display = 'block';
    
    for (i = 0; i < dots.length; i++) { // to remove the active class from other dots
        
        dots[i].className = dots[i].className.replace(' active', '');
    }
    
    dots[slideIndex - 1].className += ' active';
}

showImage(slideIndex);

function plusIndex(n) { // for Next & Prev Actions
    
    'use strict';
    
    showImage(slideIndex += n);
}

function currentSlide(n) { // for Slide Bullets Selection
    
    'use strict';
    
    showImage(slideIndex = n);
}

That’s all! hopefully, you have successfully integrated this image slider code snippet into your project. If you have any questions or facing any issues, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.