HTML CSS JavaScript Simple Image Slideshow Generator

Create a simple and lightweight image slideshow using pure HTML, CSS, and JavaScript without any external libraries. This online Image Slideshow Generator allows you to build a responsive image slider with smooth animation effects and optional auto-play functionality.

The generated slideshow code is clean, beginner-friendly, and fully customizable, making it ideal for portfolios, landing pages, banners, and gallery sections.

Slideshow Features

Animation effect selection (fade, slide, etc.)
Auto play image option
Responsive image slideshow layout
No jQuery or external libraries required

For best results, upload images that are all the same size for each slide.

Add images

Image URL :

Image alt :

Title :

Link URL :

Insert

Slider Images Drag And Reorder

image 1
×
image 2
×
image 3
×
image 4
×
image 5
×

Preview Slider

Slider Style

Image Width

Auto

Image Height

Auto

Animation effect

Auto-play Image

Delay second

Show Slide Number

Show Caption Title

Show dot Controls

Touch Swipe Support

Simple Slider Code HTML CSS JavaScript

HTML

<div id="hcg-slider-1" class="hcg-slider">
    <div class="hcg-slide-container">
        <div class="hcg-slider-track"></div>

        <a href="#" id="hcg-slide-prev">❮</a>
        <a href="#" id="hcg-slide-next">❯</a>
    </div>

    <div class="hcg-slide-dot-control"></div>
</div>

CSS

#slider .hcg-slide-container {
    width: auto;
    height: auto;
}
.hcg-slider {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.hcg-slide-container {
    height: 100%;
    width: 100%;
    max-width: 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
}
.hcg-slider-track {
    height: 100%;
}
.hcg-slides {
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: solid 1px #a0a0a0;
    box-sizing: border-box;
}
.hcg-slides img {
    max-width: 100%;
    max-height: 100%;
    min-height: 100px;
    display: inline-block;
}
.hcg-slide-text {
    color: #ffffff;
    font-size: 14px;
    padding: 3px 5px;
    position: absolute;
    bottom: 0;
    border-radius: 5px;
    left: 50%;
    text-align: center;
    text-shadow: 0 0 2px #000;
    background-color: rgba(255,255,255,0.30);
    display: inline-block;
    transform: translate(-50%, -5px);
}
#hcg-slide-prev, #hcg-slide-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    text-decoration: none;
    text-shadow: 1px 1px 5px #686868;
}
#hcg-slide-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
#hcg-slide-prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}
#hcg-slide-prev:hover, #hcg-slide-next:hover {
    background-color: #000c;
}
.hcg-slide-dot-control {
    margin-top: 10px;
    text-align: center;
}
.hcg-slide-dot {
    cursor: pointer;
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}
.hcg-slide-dot.dot-active {
    background-color: #717171;
}
.hcg-slide-number {
    color: #ffffff;
    font-size: 12px;
    padding: 4px 7px;
    position: absolute;
    border-radius: 5px;
    top: 5px;
    left: 5px;
    background-color: rgba(255,255,255,0.30);
}
/************CSS Animation***********/

.animated {
    animation-name: fadeIn;
    animation-duration: 1s;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.fadeIn {
    animation-name: fadeIn;
}

JavaScript

const imagesList = [
    {"src":"https://www.html-code-generator.com/images/slider/1.png","link":"","alt":"","name":"image 1"},
    {"src":"https://www.html-code-generator.com/images/slider/2.png","link":"","alt":"","name":"image 2"},
    {"src":"https://www.html-code-generator.com/images/slider/3.png","link":"","alt":"","name":"image 3"},
    {"src":"https://www.html-code-generator.com/images/slider/4.png","link":"","alt":"","name":"image 4"},
    {"src":"https://www.html-code-generator.com/images/slider/5.png","link":"","alt":"","name":"image 5"}
];

function simpleSlider(selector, imagesList, options = {}) {
    const slider = typeof selector === "string"
        ? document.querySelector(selector)
        : selector;

    if (!slider || !Array.isArray(imagesList) || !imagesList.length) return;


    const {
        startIndex = 0,
        display = "flex",
        animationClass = "animated",

        // Auto play options
        autoplay = false,
        autoplayDelay = 3000,
        pauseOnHover = true
    } = options;

    const track = slider.querySelector(".hcg-slider-track");
    const dotsContainer = slider.querySelector(".hcg-slide-dot-control");
    const prevBtn = slider.querySelector("#hcg-slide-prev");
    const nextBtn = slider.querySelector("#hcg-slide-next");

    let index = startIndex;
    const total = imagesList.length;
    let autoplayTimer = null;

    //  Build Slides
    track.innerHTML = imagesList.map((img, i) => `
    <a ${img.link ? `href="${img.link}" target="_blank"` : ""} class="hcg-slides ${animationClass}">
      <span class="hcg-slide-number">${i + 1}/${total}</span>
      <img src="${img.src}" alt="${img.alt || ""}">
      <span class="hcg-slide-text">${img.name || ""}</span>
    </a>
    `).join("");

    dotsContainer.innerHTML = imagesList.map((_, i) => `
    <a href="#" class="hcg-slide-dot" data-id="${i}"></a>
    `).join("");

    const slides = slider.querySelectorAll(".hcg-slides");
    const dots = slider.querySelectorAll(".hcg-slide-dot");

    //  Core Logic
    const showSlide = (i) => {
        index = (i + total) % total;

        slides.forEach((slide, idx) => {
            slide.style.display = idx === index ? "flex" : "none";
            dots[idx].classList.toggle("dot-active", idx === index);
        });
    };

    // Auto Play
    const startAutoplay = () => {
        if (!autoplay || autoplayTimer) return;
        autoplayTimer = setInterval(() => {
            showSlide(index + 1);
        }, autoplayDelay);
    };

    const stopAutoplay = () => {
        clearInterval(autoplayTimer);
        autoplayTimer = null;
    };


    // Controls
    prevBtn.addEventListener("click", e => {
        e.preventDefault();
        showSlide(index - 1);
    });

    nextBtn.addEventListener("click", e => {
        e.preventDefault();
        showSlide(index + 1);
    });

    dotsContainer.addEventListener("click", e => {
        const dot = e.target.closest(".hcg-slide-dot");
        if (!dot) return;
        e.preventDefault();
        showSlide(+dot.dataset.id);
    });

    if (pauseOnHover && autoplay) {
        slider.addEventListener("mouseenter", stopAutoplay);
        slider.addEventListener("mouseleave", startAutoplay);
    }


    // Init
    showSlide(index);
    startAutoplay();

    // Public API
    return {
        next: () => showSlide(index + 1),
        prev: () => showSlide(index - 1),
        goTo: i => showSlide(i),
        play: startAutoplay,
        pause: stopAutoplay,
        getIndex: () => index
    };
}




// Usage
const slider = simpleSlider("#hcg-slider-1", imagesList, {
    autoplay: false,
    autoplayDelay: 2000,
    pauseOnHover: true
});

Run code Try it yourself Download

Images List Configuration

The imagesList object defines all images used in the slider. Each item in the list represents a single slide and controls how the image is displayed, labeled, and linked. By updating the values in this list, you can easily add, remove, or customize slider images without changing the slider logic.

Each image entry uses simple key value pairs to describe the image source, display text, optional link, and accessibility information.

JavaScript

const imagesList = [
  {
    src: "https://example.com/image.jpg",   // Image source URL
    title: "Slider Image Title",            // Text shown on the slide
    link: "https://example.com",             // Optional link on click
    alt: "Description of the image"          // Image alt text
  }
];

Key Descriptions

src
Specifies the image source URL. This value should be a direct link to the image file that will be displayed in the slider.

alt
Sets the alternative text for the image. This text improves accessibility for screen readers and is displayed if the image fails to load.

title
Defines the text shown on the slider for the image. This is typically used as a caption or label and helps users understand the content of the slide.

link
An optional link URL. When provided, clicking the image will open the specified page. If left empty, the image will not act as a clickable link.

Slider Public API Usage

The slider exposes a public API that allows you to control slide navigation and autoplay programmatically. This API is returned when the slider is initialized and can be stored in a variable for later use. It is useful for custom buttons, external controls, or advanced interactions.

Using the public API, you can move between slides, jump to a specific slide, control autoplay behavior, and retrieve the current slide index without directly modifying the slider code.

JavaScript

const sliderApi = simpleSlider("#slider-1", imagesList, {
	autoplay: true,
	autoplayDelay: 4000
});

Available Methods

next()
Moves the slider to the next slide. If the last slide is reached, it automatically wraps to the first slide.

sliderApi.next();

prev()
Moves the slider to the previous slide. If the first slide is active, it wraps to the last slide.

sliderApi.prev();

goTo(index)
Navigates directly to the specified slide index. The index is zero-based, meaning the first slide starts at index 0.

sliderApi.goTo(3); // Goes to the 4th slide

play()
Starts the slider autoplay. This is useful when autoplay is disabled by default or when you want to resume autoplay after user interaction.

sliderApi.play();

pause()
Stops the autoplay immediately. Commonly used when users interact with the slider or when the slider is outside the viewport.

sliderApi.pause();

getIndex()
Returns the currently active slide index. This can be used to display slide numbers, sync with other UI elements, or trigger custom logic.

const currentSlide = sliderApi.getIndex();
console.log("Current slide:", currentSlide);

Example: External Controls

JavaScript

<button onclick="sliderApi.prev()">Previous</button>
<button onclick="sliderApi.next()">Next</button>
<button onclick="sliderApi.pause()">Pause</button>
<button onclick="sliderApi.play()">Play</button>

This allows full control of the slider outside its container.

Report Problem