Responsive Background Carousel In Pure JavaScript – Karusel

Category: Javascript , Slider | August 2, 2019
Views Total:401 views
Official Page:Go to website
Last Update:August 2, 2019


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">
    <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>

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 {
.bingkai {
  position: relative;
  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;
  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);

You Might Be Interested In:

Leave a Reply