Easy Carousel Slider With Vanilla JavaScript – tCarousel.js

Preview:

Description:

A lightweight, easy-to-implement carousel slider library that is easy to config via CSS classes and HTML data attributes.

How to use it:

1. To use the carousel library, include the following JavaScript and Stylesheet on the page.

<link rel="stylesheet" href="css/tCarousel.css" />
<script src="js/tCarousel.js" defer></script>

2. Create a horizontal carousel slider. Note that each slider must have a unique ID.

<div class="t-carousel t-h" id="myCarousel">
  <!-- Slides -->
  <div class="t-items">
    <div class="t-item">
      <p class="content p-1">1</p>
    </div>
    <div class="t-item">
      <p class="content p-2">2</p>
    </div>
    <div class="t-item">
      <p class="content p-3">3</p>
    </div>
    <div class="t-item">
      <p class="content p-4">4</p>
    </div>
    <div class="t-item">
      <p class="content p-5">5</p>
    </div>
  </div>
  <!-- Navigation Buttons -->
  <button class="t-btn t-left">
    Left
  </button>
  <button class="t-btn t-right">
    Right
  </button>
  <button class="t-btn t-up">
    Up
  </button>
  <button class="t-btn t-down">
    Down
  </button>
</div>

3. To create a vertical carousel slider, just replace the t-h with t-v.

<div class="t-carousel t-v" id="myCarousel">
  ...
</div>

4. Set the direction in which the slider scrolls. Possible values: left, right, up, or down.

<div class="t-carousel t-v" id="myCarousel" data-tc-direction="down">
  ...
</div>

5. Specify the animation speed in seconds.

<div class="t-carousel t-v" id="myCarousel" data-tc-time-sec="3">
  ...
</div>

6. Initialize & re-initialize the carousel slider.

// initialize
tCarousel.tInit();
// destroy
tCarousel.tClear();
// disable autoplay
tCarousel.tClear({ 
  only_Automatic: true
});