Press "Enter" to skip to content

A Lightweight, Modern, and Customizable JavaScript Slider Library | NSlider

NSlider is a lightweight (<10KB), modern and customizable sliding JavaScript library. Universal carousel for displaying multiple similar pieces of content along a horizontal or vertical axis.

How to make use of it:

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

<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 transfer to the following slide each x seconds.

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

5. Config the transition impact.

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

6. Determine whether or not to show pagination bullets.

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

7. Determine whether or not to allow 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 preliminary slide on init.

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

Generic Carousel Component, NSlider Plugin/GIthub


See Demo And Download

Official Website(fatihege): Click Here

This superior jQuery/javascript plugin is developed by fatihege. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.