Responsive Background Carousel In Pure JavaScript – Karusel

Karusel is a small, responsive, automatic, vanilla JavaScript carousel library that works with unordered lists and background images.

How to use it:

Add background images to list items and then wrap them into the carousel container.

<div class="bingkai">
  <ul>
    <li style="background:url(1.jpg) 50%/cover no-repeat"><h1>Slider#1</h1></li>
    <li style="background:url(2.jpg) 50%/cover no-repeat"><h1>Slider#2</h1></li>
    <li style="background:url(3.jpg) 50%/cover no-repeat"><h1>Slider#3</h1></li>
    <li style="background:url(4.jpg) 50%/cover no-repeat"><h1>Slider#4</h1></li>
    <li style="background:url(5.jpg) 50%/cover no-repeat"><h1>Slider#5</h1></li>
  </ul>
</div>

Place the main JavaScript file karusel.js at the end of the document.

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

The example CSS for the background carousel.

.bingkai, ul {
  top:0;
  left:0;
}
.bingkai {
  position: relative;
  top:50%;left:50%;
  transform: translate(-50%,-50%);
  width: 500px;
  height: 380px;
  box-shadow: 0 0 165px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  border-bottom: 7px solid black;
}
.bingkai ul {
  position: absolute;
  width:100%;
  height: 100%;
  display: inline-flex;
}
.bingkai li {
  list-style: none;
  width: 100%;
  padding: 25px;
  font-size: 25px;
  color: white;
  letter-spacing: 5px;
  text-transform: uppercase;
  text-shadow: 1px 3px 6px rgba(0,0,0,.5);
}