Carousel Slider Pure JavaScript

This pure JavaScript code snippet helps you to create a carousel slider. It comes with arrows navigation to smoothly navigate next and previous images. Besides this, it uses an interval function to play slides automatically. You can also place content over images and customize the slider with its available options.

How to Create Carousel Slider Pure JavaScript

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

 <div class="slider">
  <ul>
    <li>
      <img src="https://source.unsplash.com/450x450/?girl">
      <h1>Hello world</h1>
      <p>
        Your content goes here...
      </p>
    </li>
    <li><img src="https://source.unsplash.com/450x450/?girl"></li>
    <li><img src="https://source.unsplash.com/450x450/?laptop"></li>
    <li><img src="https://source.unsplash.com/450x450/?cat"></li>
  </ul>
  <!-- left -->
  <button></button>
  <!-- right -->
  <button></button>
</div>

  <script  src="./js/script.js"></script>

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

/* --- start --- this style is constant ---------- */
@keyframes slider-key-next {
  0% {left: 100%; }
  100% {left: 0; }
}
@keyframes slider-key-left {
  0% {left: 0; }
  100% {left: -100%; }
}
@keyframes slider-key-previous {
  0% {left: -100%; }
  100% {left: 0; }
}
@keyframes slider-key-right {
  0% {left: 0; }
  100% {left: 100%; }
}
.slider {
  overflow: hidden;
  position: relative;
}
.slider > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: left;
  width: 100%;
  overflow: hidden;
}
.slider > ul > li {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.slider > ul > li.active {visibility: visible; left: 0; }
.slider > ul > li.left {animation-name: slider-key-left; }
.slider > ul > li.next {animation-name: slider-key-next; }
.slider > ul > li.right {animation-name: slider-key-right; }
.slider > ul > li.previous {animation-name: slider-key-previous; }
/* --- end --- this style is constant ---------- */


/* -- your style here -- */
.slider {
  max-width: 600px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
.slider > button {
  transition: 0.3s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: #FAFAFA;
  opacity: 0.5;
  border: 0;
  outline: none;
  padding: 0;
  cursor: pointer;
  border-radius: 100%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}
.slider > button:hover {
  opacity: 1;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.slider > button:nth-child(2) {
  left: 10px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAEAUlEQVR4Xu3dO24UQRCAYftYcAGfABFa4nUciDEcgQCJOwAShCBE7hMACY+A7mAly7K9NdNd1fX4LU0A9M5M1/8x3iUwpyd8lZ7Aaends/kTABRHAAAAFJ9A8e3zBABA8QkU3z5PAAAUn0Dx7fMEAEDxCRTfPk8AAJSdwOO282/teF92Am3jVZ8Az9reX7bjVzvOKiOoCOAQ//AXvzSCagCuxy+PoBKA2+KXRlAFwLH4ZRFUACCNXxJBdgBb419FcK/94kv2j4iZAeyN35u/bcfDdvwBQMwJEF/YLeMTgPjC+H1ZNgDE3xA/GwDib4yfCQDxd8TPAoD4O+NnAED8gfjRARB/MH5kAMSfED8qAOJPih8RAPEnxo8GgPiT40cCQHyF+FEAEF8pfgQAxFeM7x0A8ZXjewZAfIP4XgEQ3yi+RwDEN4zvDQDxjeN7AkD8BfG9ACD+ovgeABB/YfzVAIi/OP5KAMR3EH8VAOI7ib8CAPEdxbcGQHxn8S0BEN9hfCsAxHca3wIA8R3H1wZAfOfxNQEQP0B8LQDEDxJfAwDxA8WfDYD4weLPBED8gPFnARiJ/6ndxIt2/As6P6+3/aHd2KXk5kZ/RtBIfMn9sWbfBB60l72RvHQEAPElE16zRh0A8deElV5VFQDxpRnWrVMDQPx1UbdcGQBbppVwrRqAPqun7bhIOLRMW1IF0Af1pB2vMk0s2V7UAfR59f92rSMY+SiZbO5utmMCoO/2UTteg8BN+MONmAEYRfC5neB5O/66G2HsG/rYbt/kn4IPYxp5ErxrJ+lif8eeecy7n/n9GwQBDcwEMPrtgCfBAkCzAYBgQcSRS2oAAMFIEePXagEAgXHIvZfTBACCvVUMX6cNAASGMfdcygIACPaUMXqNFQAQGAXdehlLACDYWsdgvTUAEBhE3XKJFQBAsKWQ8tpVAECgHFZ6+pUAQCCtpLhuNQAQKMaVnNoDABBISimt8QIABEqBj53WEwAQHKul8OfeAIBAIfJdp/QIAASGCLwCAIERAs8AQGCAwDsAECgjiAAABIoIogAAgRKCSABAoIAgGgAQTEYQEQAIJiKICgAEkxBEBgCCCQiiAwDBIIIMAEAwgCALABDsRJAJAAh2IMgGAAQbEWQEAIINCLICAIEQQWYAIwh+tBffb8dX4RzDLssOYA+CHv+sHf1n7aX/qgBgC4JS8ftgqgCQICgXvxqAuxCUjF8RwE0IysavCuAqgp+V3vDd9I620nuA6/s/b7/xvcq7/ds+zlQGkP4jnmSDAJBMKfEaACSOK9kaACRTSrwGAInjSrYGAMmUEq8BQOK4kq0BQDKlxGsAkDiuZGsAkEwp8RoAJI4r2RoAJFNKvOY/NR8wkHwupfAAAAAASUVORK5CYII=);
}
.slider > button:nth-child(3) {
  right: 10px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAEDklEQVR4Xu3cTW5TMRSG4XSAQMASmHUOEkwAiQ0gMWQBIFaAWA8qYgZijFhA1wXnQkPTNsn133GP/b2VPKjqe22f74nj3kg52fAjXYET6dWz+A0AxBEAAADiFRBfPjsAAMQrIL58dgAAiFdAfPnsAAAQr4D48tkBACBegc3mlVXg1NqZYiXUd4Al/J/W7lv7YO2zGgJlANvwH1yE/lsRgSqA6+FvX/hyCBQBHApfEoEagLXw5RAoAUgNXwqBCoAnluq5te2BL/WwP/2ZQAXAXUv8u7U3qcnv9JsagQqAJU8Q7NGvBAAEAPhbAXaCHQhqO8B26SC4qIQqAHYCAPB2sFRAeQfg7QAA/09DsmcCdoDLE7EkAgBc/d9YDgEAbj4ckUIAgP0fDsggAMDhT4ckEADg+MeD0yMAwPrnw1MjAMA6gKkfGwMgDcC0CACQDmBKBADIAzAdAgDkA5gKAQDKAEyDAADlAKZAAIA6AMMjAEA9gKERAKANgGERAKAdgCERAKAtgOEQAKA9gKEQAMAHwDAIAOAHYAgEAPAFEB4BAPwBhEYAgD4AwiIAQD8AIREAoC+AcAgA0B9AKAQAuB0AYRDkAHhks35xe/WacuQ7tqqP1p4VrK7Jt5flAHhrk/xWMFEu8atANQIA+IXT685VCADQKybfcYoRAMA3mJ53L0IAgJ4R+Y+VjQAA/qH0HAEAPasdbKwl/PfWznLmxQ6QU624fZfw31n7kjtFAORWLF7/4vCXpQAgXqA5M6oKPxfA8ij4ec7s6LtageVR8CdrT1d73uxQHX4ugII5csmRCtyzv/2w9rqgSk3CB0BB5RtdEiJ8ADRKM/M2YcIHQGZyDbqHCh8ADRLNuEW48AGQkV5l15DhA6Ay1cTLw4YPgMQEK7qFDh8AFckmXBo+fAAkpFjYZYjwAVCY7splw4QPgPYAhgofAG0BDBc+ANoBGDJ8ALQBMGz4AKgHMHT4AKgDMHz4ACgHMEX4ACgDME34AMgHMFX4AMgDMF34AEgHMGX4AEgDMG34AFgHMHX4ADgOYPrwAXAYgET4ANgPQCZ8ANwEIBU+AK4CkAsfAJcAJMMHwD8AsuEDQDx8dQDSr/ztu1/OV8SsPzcbpwfhX2SlCIDwd16oagAI/9ourQSA8Pe8RasAIPwD5zMVAI9t/efWHmaeU5t9G1fmuN26qwBYCvrS2q8MBNOHr/gcIBWBRPiKAFJ2ApnwVQEcQyAVvjKAfQjkwlcHsIvggf1S9H373Y7rTgMp/RdwqITLwfDU2lenGoe+LQBCx+M/OQD41zj0CAAIHY//5ADgX+PQIwAgdDz+kwOAf41DjwCA0PH4Tw4A/jUOPQIAQsfjPzkA+Nc49AgACB2P/+QA4F/j0CP8AQt1MpCfJsp4AAAAAElFTkSuQmCC);
}
.slider > ul > li > img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  left: 0;
  top: 0;
}
.slider > ul > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0;
}
.slider > ul > li h1,
.slider > ul > li p {
  position: relative;
  padding: 0 15%;
  color: #fff;
  font-family: sans-serif;
}

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

function Sliders(o) {
  "use strict";
  var time = o.time || 500,
      autoTime = o.autoTime || 5000,
      selector = o.selector,
      width_height = o.width_height || 100 / 70,
      sliders = document.querySelectorAll(selector),
      i;
  function css(elm, prop, val) {
    elm.style[prop] = val;
    prop = prop[0].toUpperCase() + prop.slice(1);
    elm.style["webkit" + prop] = elm.style["moz" + prop] =
      elm.style["ms" + prop] = elm.style["o" + prop] = val;
  }
  function anonimFunc(slider) {
    var buttonLeft = slider.children[2],
        buttonRight = slider.children[1],
        ul = slider.children[0],
        li = ul.children,
        activeIndex = 0,
        isAnimate = false,
        i,
        s;
    ul.style.paddingTop = (100 / width_height) + "%";
    for (i = 0; i < li.length; i += 1) {
      css(li[i], "animationDuration", time + "ms");
    }
    li[activeIndex].classList.add("active");
    function left() {
      if (isAnimate) {return; }
      clearTimeout(s);
      isAnimate = true;
      var nextIndex = (activeIndex < li.length - 1) ? (activeIndex + 1) : (0);
      li[nextIndex].classList.add("next");
      li[activeIndex].classList.add("left");
      li[nextIndex].classList.add("active");
      setTimeout(function () {
        li[activeIndex].classList.remove("active");
        li[activeIndex].classList.remove("left");
        li[nextIndex].classList.remove("next");
        li[nextIndex].classList.add("active");
        activeIndex = nextIndex;
        isAnimate = false;
        s = setTimeout(left, autoTime);
      }, time);
    }
    function right() {
      if (isAnimate) {return; }
      clearTimeout(s);
      isAnimate = true;
      var nextIndex = (activeIndex > 0) ? (activeIndex - 1) : (li.length - 1);
      li[nextIndex].classList.add("previous");
      li[activeIndex].classList.add("right");
      li[nextIndex].classList.add("active");
      setTimeout(function () {
        li[activeIndex].classList.remove("active");
        li[activeIndex].classList.remove("right");
        li[nextIndex].classList.remove("previous");
        li[nextIndex].classList.add("active");
        activeIndex = nextIndex;
        isAnimate = false;
        s = setTimeout(right, autoTime);
      }, time);
    }
    buttonLeft.addEventListener("click", left);
    buttonRight.addEventListener("click", right);
    s = setTimeout(right, autoTime);
  }
  for (i = 0; i < sliders.length; i += 1) {
    anonimFunc(sliders[i]);
  }
}


/* -- how to use it ? -- */
var sliders = new Sliders({
  selector: ".slider",
  time: 500,
  autoTime: 3000,
  width_height: 350 / 250
});

That’s all! hopefully, you have successfully integrated this carousel 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.