Tiny Carousel With Counter, Progressbar, And Navigation Controls

Preview:

Description:

A super tiny carousel slider JavaScript library that can be used to loop through any web content in sequence.

Features:

• Pagination bullets and Navigation arrows.
• Slide counter indicating the current and total slides.
• Progress bar indicating how many slides are left.

How to use it:

1. Add the stylesheet slider.css and JavaScript slider.js to the page.

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

2. Add your content as slides to the carousel slider.

<div class="slider-container example">
  <!-- Slides -->
  <div class="slider">
    <div class="slider__item">
      Slide 1
    </div>
    <div class="slider__item">
      Slide 2
    </div>
    <div class="slider__item">
      Slide 3
    </div>
    <div class="slider__item">
      Slide 4
    </div>
    <div class="slider__item">
      Slide 5
    </div>
  </div>
  <!-- Navigation Arrows -->
  <div class="arrows">
    <span class="arrows__item arrows__item_prew">&#10096;</span>
    <span class="arrows__item arrows__item_next">&#10097;</span>
  </div>
</div>

3. Initialize the slider and done.

slider({
  name: ".example"
});

4. Determine whether to show the pagination bullets.

slider({
  name: ".example",
  dots: true
});

5. Determine whether to show the counter.

slider({
  name: ".example",
  numberSlid: true
});

6. Determine whether to show the progress bar.

slider({
  name: ".example",
  line: true
});