Responsive Multi Media Carousel Plugin – Kiwwwi Slider

Kiwwwi Slider is a small, flexible, fully responsive carousel/slider built using pure JavaScript and CSS that supports any media types such as text, images, and even videos.

How to use it:

Add your slide content to the carousel with a unique ID. Note that each slide inside the carousel MUST be an <article> tag.

<div id="slider">
  <div class="slide-left"><</div>
  <div class="slide-right">></div>
  <article>
      <div>
          <h1>Slide 1</h1>
          <p>The slide can have some text</p>
      </div>
  </article>
  <article>
      <div>
          <h1>Slide 2</h1>
          <p>Or a picture of a cute cat</p>
      </div>
  </article>
  <article>
      <div>
          <h1>Slide 3</h1>
          <p>Anything you want really</p>
      </div>
      <video autoplay loop src="vid/clouds.webm"></video>
  </article>
</div>
</div>

The example CSS styles for the carousel slider.

#slider article {
  height: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
}
.slide-left, .slide-right {
  top: 14rem;
  padding: 0.5rem 1rem;
  font-family: sans-serif;
  font-size: 2rem;
  cursor: pointer;
  color: white;
  background-color: rgba(0, 0, 0, 0.25);
}
.slide-left { left: 1rem; }
.slide-right { right: 1rem; }
#slider article h1 {
  font-size: 2rem;
  text-align: center;
}
#slider article p { text-align: center; }
#slider article:nth-of-type(1) {
  color: white;
  background-color: #333333;
}
#slider article:nth-of-type(2) {
  color: white;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../img/cute-cat.jpg');
}
#slider article:nth-of-type(3) {
  position: relative;
  color: black;
  overflow: hidden;
}
#slider article:nth-of-type(3) div { z-index: 2; }
#slider article:nth-of-type(3) video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

Place the Kiwwwi Slider’s JavaScript file at the end of the document.

<script src="js/kiwwwi-slider.min.js"></script>

Initialize the carousel slider.

var mySlider = new KiwwwiSlider(document.querySelectorAll('#slider')[0], 3000, 1);

Possible parameters:

• sliderEl: Element containing the slides
• duration: Time in milliseconds between automatic slide switching, false if no auto-slide
• transition: Time in seconds of the transition between slides

KiwwwiSlider(sliderEl, duration, transition);