Super Tiny Carousel In Vanilla JavaScript – Lite Carousel

Category: Javascript , Slider | January 6, 2017
2 Comments
Demo Download
Author: dineshselvantdm
Views Total: 2,588
Official Page: Go to website
Last Update: January 6, 2017
License: MIT

Preview:

Super Tiny Carousel In Vanilla JavaScript – Lite Carousel

Description:

Lite Carousel is a really light, zero-dependency JavaScript carousel library that uses the requestAnimationFrame() method to provide the fast, smooth transition effect between slides.

How to use it:

Add custom slides and next/prev buttons to the carousel.

<div id="lite-carousel">
  <div id="prev"><</div>
  <div class="viewport">
    <ul>
      <li><img src="1.jpg"><span>Item 1</span></li>
      <li><img src="2.jpg"><span>Item 2</span></li>
      <li><img src="3.jpg"><span>Item 3</span></li>
    </ul>
  </div>
  <div id="next">></div>
</div>

Load the main JavaScript file at the end of the document.

<script src="lite-carousel.min.js"></script>

The main JavaScript to active the carousel.

//For Left Click action:-
document.getElementById('prev').addEventListener("click",function(){
  var delay = 500;  //Animation slide time in milliseconds
  var ul_selector = '#lite-carousel ul';  //Pass the ul selector as input 
  var position = 'Left';
  CircularCarousel.shiftCarousel(position,ul_selector,delay);
});

//For Right Click action:-
document.getElementById('next').addEventListener("click",function(){
  var delay = 500;  //Animation slide time in milliseconds
  var ul_selector = '#lite-carousel ul';  //Pass the ul selector as input 
  var position = 'Right';
  CircularCarousel.shiftCarousel(position,ul_selector,delay);
});

The sample CSS to style the carousel.

img {
  width: 200px;
  height: 100px;
}

span {
  position: absolute;
  top: 39px;
  left: 81px;
}

ul {
  width: 300%;
  position: absolute;
  padding: 0px;
}

div.viewport {
  overflow: hidden;
  width: 203px;
  height: 117px;
  position: relative;
  margin-left: 15px;
}

li {
  list-style: none;
  position: relative;
  float: left;
  margin-left: 3px;
}

div#lite-carousel {
  overflow: hidden;
  position: relative;
  margin-left: 39%;
}

div#prev {
  position: absolute;
  cursor: pointer;
  top: 54px;
  font-weight: bold;
}

div#next {
  position: absolute;
  cursor: pointer;
  left: 226px;
  top: 54px;
  font-weight: bold;
}

See Also:

You Might Be Interested In:

2 thoughts on “Super Tiny Carousel In Vanilla JavaScript – Lite Carousel”

  1. Abby Frankie Pratchios

    How would you modify this to accommodate multiple carousels on the same page?

    Reply ↓
    1. Abby Frankie Pratchios

      Nevermind, I solved the issue myself by creating separate “prev” and “next” click functions for each slideshow and assigning custom variables to each. It works well and is a simple solution for someone as green as I am to Javascript. Just make sure you update the HTML div tags and create the additional CSS per carousel.

      Example:

      //For Left-2 Click action:-

      document.getElementById(‘prev-2’).addEventListener(“click”, function() {

      var delay = 500; //Animation slide time in milliseconds

      var ul_selector = ‘#lite-carousel-2 ul’; //Pass the ul selector as input

      var position = ‘Left’;

      CircularCarousel.shiftCarousel(position, ul_selector, delay);

      });

      //For Right-2 Click action:-

      document.getElementById(‘next-2’).addEventListener(“click”, function() {

      var delay = 500; //Animation slide time in milliseconds

      var ul_selector = ‘#lite-carousel-2 ul’; //Pass the ul selector as input

      var position = ‘Right’;

      CircularCarousel.shiftCarousel(position, ul_selector, delay);

      });

      Reply ↓

Leave a Reply