Generic Carousel Component With JavaScript – NSlider

Preview:

Description:

NSlider is a lightweight, customizable, keyboard-accessible carousel plugin written in vanilla JavaScript.

How to use it:

1. Insert the NSlider’s JavaScript and CSS into the document.

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

2. Add any content to the carousel slides as follows:

<div class="container">
  <div class="nslider">
    <div class="nslider-wrapper">
      <div class="nslider-slide" id="slide-1">
        Slide 1 Content
      </div>
      <div class="nslider-slide" id="slide-2">
        Slide 2 Content
      </div>
      <div class="nslider-slide" id="slide-3">
        Slide 3 Content
      </div>
      <!-- More Slides Here -->
    </div>
    <!-- Carousel Controls -->
    <div class="nslider-button nslider-button-prev"></div>
    <div class="nslider-button nslider-button-next"></div>
  </div>
</div>

3. Initialize the NSlider plugin and specify the selector of the parent container.

const slider = new NSlider({
      elem: document.querySelector('.container'),
});

4. Enable the carousel to automatically move to the next slide every x seconds.

setInterval(() => slider.next(), 5000);
// or
setInterval(() => slider.prev(), 5000);

5. Config the transition effect.

const slider = new NSlider({
      elem: document.querySelector('.container'),
      animation: {
        duration: 1000, // Milliseconds
        timingFunction: 'ease-in'
      },
});

6. Determine whether to display pagination bullets.

const slider = new NSlider({
      elem: document.querySelector('.container'),
      dots: true,
});

7. Determine whether to enable keyboard interactions.

const slider = new NSlider({
      elem: document.querySelector('.container'),
      keyboardControl: true,
});

8. Customize the navigation arrows.

const slider = new NSlider({
      elem: document.querySelector('.container'),
      prevButtonInner: '<',
      nextButtonInner: '>',
});

9. Set the initial slide on init.

const slider = new NSlider({
      elem: document.querySelector('.container'),
      currentSlide: 2 // slide 3
});

Changelog:

08/11/2021

• v1.0.0