Simple Responsive Slides In HTML JS (Free Download)

Once upon a time, a student had to create slides for his project. He went “aiyah so easy, just load a library”. But after a few minutes, smoke rises from his head and he complained something about the library being too difficult. Well, you don’t need a library. Just some clever HTML, CSS, JS – Let Master Coffee show you how, let’s go.

CODE DOWNLOAD

ZIP File

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

VIDEO TUTORIAL

RESPONSIVE SLIDESHOW DEMO

Hot Coffee

Iced Coffee

Canned Coffee

Mouse over the slides to show the controls, hit < or > to change the current slide. Resize the window, and the slides will also resize to fit.

PART 1) THE HTML

slides.html

<div class="slidesWrap">
  <!-- (PART A) SLIDES -->
  <div class="slidesRow">
    <div class="slide" id="demoA">Hot Coffee</div>
    <div class="slide" id="demoB">Iced Coffee</div>
    <div class="slide" id="demoC">Canned Coffee</div>
  </div>

  <!-- (PART B) LAST/NEXT -->
  <div class="last">&lt;</div>
  <div class="next">&gt;</div>
</div>

<div class="slidesWrap"> The entire “slides widget”.
<div class="slidesRow"> Put all your slides in this wrapper.
<div class="slide"> A slide.

<div class="last"><div class="next"> Last and next slide button.

PART 2) THE CSS

2A) SET THE DIMENSIONS

slides.css

/* (PART A) DIMENSIONS */
.slidesWrap, .slidesRow, .slide {
  width: 100%; max-width: 600px;
  height: 320px; 
}

The first thing we do in the CSS – Set the “entire widget”, “slides wrapper” and “slide” to the same size.

2B) SLIDES MECHANISM

slides.css

/* (PART B) SLIDES */
/* (B1) SLIDES IN SINGLE ROW */
.slidesRow { display: flex; flex-wrap: nowrap; }
.slide { flex: 0 0 auto; }

/* (B2) POSITION SLIDES ROW TO "CHANGE SLIDE" */
.slidesWrap { overflow: hidden; }
.slidesWrap, .slidesRow { position: relative; }
.slidesRow { transition: all 0.5s; right: 0; }

/* (B3) OPTIONAL - INDIVIDUAL SLIDES */
#demoA, #demoB, #demoC {
  font-family: Impact, sans-serif;
  font-size: 32px; font-weight: 700;
  color: #fff; -webkit-text-stroke: 1px #9b3333; padding: 10px;
  display: flex; justify-content: center; align-items: flex-end;
  background-position: center; background-size: cover;
}
#demoA { background-image: url(demo1.webp); }
#demoB { background-image: url(demo2.webp); }
#demoC { background-image: url(demo3.webp); }

Don’t panic. Let’s walk through these step-by-step.

(B1) The idea is to lay all the slides in a long horizontal row.
- All we need is to set .slidesRow { display: flex; flex-wrap: nowrap; }
- To prevent the browser from resizing the slides to fit, set .slide { flex: 0 0 auto; }

(B2) Next, handle the slides mechanism.
- Make sure that only one slide will show at a time – .slidesWrap { overflow: hidden; }
- To change the slide, we simply move the “slides row” – .slidesRow { position: relative; right: N%; }
- Where right: 0 is the first slide, right: 100% is the second, right: 200% is the third, and so on.
(B3) That’s about it. Feel free to style the individual slides to your own liking.

2C) LAST & NEXT BUTTONS

slides.css

/* (PART C) LAST/NEXT BUTTONS */
/* (C1) POSITION BUTTONS */
.last, .next {
  position: absolute; z-index: 2;
  top: 50%; transform: translateY(-50%);
}
.last { left: 10px; }
.next { right: 10px; }

/* (C2) SHOW ONLY ON HOVER */
.last, .next { display: none; }
.slidesWrap:hover .last, .slidesWrap:hover .next { display: flex; }

/* (C3) COSMETICS */
.last, .next {
  width: 50px; height: 50px; border-radius: 50%;
  justify-content: center; align-items: center;
  font-size: 24px; cursor: pointer;
  color: #fff; background: rgba(0, 0, 0, 0.5);
}

.last, .next { position: absolute; top: 50%; transform: translateY(-50%); } Vertically center both buttons.
.last { left: 10px; } Previous slide button on the left.

.next { right: 10px; } Next slide button on the right.
.last, .next { display: none; } Hide the buttons by default.
.slidesWrap:hover .last, .slidesWrap:hover .next { display: flex; } Show the buttons only on mouse hover.

Feel free to reposition the buttons as you see fit.

PART 3) THE JAVASCRIPT

slides.js

window.addEventListener("load", () => {
  // (PART A) HELPER - MOVE SLIDE
  var slider = (target, direction) => {
    // (A1) NEXT/LAST SLIDE
    if (direction) { target.now++; }
    else { target.now--; }
    if (target.now < 0) { target.now = target.all - 1; }
    if (target.now >= target.all) { target.now = 0; }

    // (A2) UPDATE SLIDE
    target.querySelector(".slidesRow").style.right = (target.now == 0 ? 0 : `${target.now}00%`);
  };

  // (PART B) LOOP THROUGH ALL SLIDES
  document.querySelectorAll(".slidesWrap").forEach((slides, i) => {
    // (B1) ATTACH FLAGS
    slides.now = 0;
    slides.all = slides.querySelectorAll(".slide").length;

    // (B2) LAST/NEXT BUTTONS
    slides.querySelector(".last").onclick = () => slider(slides, false);
    slides.querySelector(".next").onclick = () => slider(slides, true);
  });
});

Lastly, a bit of Javascript to control the last/next buttons.

(B) On window load, loop through all the sliders. Two flags will be attached:
- now The current slide.
- all Total number of slides.
(A & B2) On clicking the last/next button.
- Up the now flag accordingly.
- To show the selected slide, just update the right position accordingly.

THE END – AUTO SCROLL

That’s all for this tutorial and sharing. Before we end, here’s one last bit to add “auto-scroll” to the slides, just attach a timer:

// (PART B) LOOP THROUGH ALL SLIDES
document.querySelectorAll(".slidesWrap").forEach((slides, i) => {
  // ...

  // (OPTIONAL TIMER)
  slides.timer = setTimeout(() => slider(slides, true), 2000);
});

Of course, we also reset the timer whenever the slide changes.

// (PART A) HELPER - MOVE SLIDE
var slider = (target, direction) => {
  // (OPTIONAL TIMER)
  clearTimeout(target.timer);
  target.timer = setTimeout(() => slider(target, true), 2000);

  // ...
};