Versatile Slider & Carousel JavaScript Library – Swiffy Slider

Preview:

Description:

Swiffy Slider is a responsive, accessible, touch-enabled, SEO-friendly slider library for creating modern image carousels, news tickers, product galleries, and much more.

Features:

• Super Lightweight. Just 2.5kb minified.
• Multiple slides per view.
• Supports touch swipe events.
• Supports any elements in slides.
• Easy to config via CSS classes.
• Easy to implement without any JS call.
• Auto snapping using the CSS Scroll Snap.

How to use it:

1. Import the Swiffy Slider’s JavaScript and Stylesheet.

<link rel="stylesheet" href="dist/css/swiffy-slider.min.css" />
<script src="dist/js/swiffy-slider.min.js"></script>

2. The basic markup for the Swiffy Slider.

• .swiffy-slider: Slider wrapper
• .slider-container: Slides should be placed in this container
• .slider-nav: Navigation controls
• .slider-indicators: Pagination controls

<div class="swiffy-slider">
  <!-- Slides -->
  <ul class="slider-container">
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    ... more slides here ..
  </ul>
  <!-- Navigation Buttons -->
  <button type="button" class="slider-nav"></button>
  <button type="button" class="slider-nav slider-nav-next"></button>
  <!-- Pagination Indicators -->
  <div class="slider-indicators">
    <button class="active"></button>
    <button></button>
    <button></button>
  </div>
</div>

3. Config the slides using the following CSS classes.

• .slider-item-showN: Shows the N slide on page load.
• .slider-item-reveal: Shows part of next/prev slides.
• .slider-item-ratio: Enables ratio sizing of the slides.
• .slider-item-ratio-nXn: Sets the ratio, e.g. slider-item-ratio-4×3.
• .slider-item-ratio-contain: Uses object-fit:contain instead of default object-fit:cover.
• .slider-item-nogap: Removes the space between slides.
• .slider-item-snapstart: Snaps slides to start of the slider wrapper.
• .slider-item-nosnap: Removes auto snapping.
• .slider-item-nosnap-touch: Removes auto snapping on touch devices.
• .slider-item-shadow: Adds shadows to slides.
• .slider-item-helper: Just for debugging.

<div class="swiffy-slider config-class-here">
  ...
</div>

4. Config the navigation controls using the following CSS classes.

• .slider-nav-page: Slides the entire page when showing more than one slide item on the slider wrapper.
• .slider-nav-noloop: Disables infinite loop
• .slider-nav-nodelay: Disables smooth scrolling when sliding using navigation buttons, indicators and autoplay.
• .slider-nav-autoplay: Enables autoplay
• .data-slider-nav-autoplay-interval: Changes the default autoplay interval – value is in ms. Note that this is an attribute rather than a CSS class.
• .slider-nav-autopause: Auto pause.
• .slider-nav-round: Round nav.
• .slider-nav-square: Square nav.
• .slider-nav-arrow: Arrow nav.
• .slider-nav-chevron: Chevron nav.
• .slider-nav-caret: Caret nav.
• .slider-nav-caretfill: Caret nav.
• .slider-nav-touch: Shows navigation buttons on touch devices.
• .slider-nav-visible: Always shows the navigation buttons.
• .slider-nav-outside: Displays the navigation buttons outside of the slider.
• .slider-nav-outside-expand: Displays the navigation buttons outside of the slider with negative margins (-3 or -5 rem).
• .slider-nav-scrollbar: Shows scrollbar.
• .slider-nav-dark: Dark navigation buttons.

<div class="swiffy-slider config-class-here">
  ...
</div>

5. Config the pagination controls using the following CSS classes.

• .slider-indicators-round: Round indicator
• .slider-indicators-square: Square indicator
• .slider-indicators-outside: Displays the pagination controls outside of the slider
• .slider-indicators-dark: Dark pagination controls.
• .slider-indicators-highlight: Hightlights the active indicator.
• .slider-indicators-sm: Shows the pagination controls on small devices.

<div class="swiffy-slider config-class-here">
  ...
</div>

6. API methods and callbacks.

// get the version
swiffyslider.version;
// initialize all instances
swiffyslider.init(rootElement = document.body);
// initialize an instance
swiffyslider.initSlider(sliderElement);
// goto the next/prev slide
swiffyslider.slide(sliderElement, next = true);
// go to a slide by indicator
swiffyslider.slideToByIndicator();
// go to a specific slide
swiffyslider.slideTo(sliderElement, slideIndex);
// callback
swiffyslider.onSlideEnd(sliderElement, delegate, timeout = 125);
// enable autoplay
swiffyslider.autoPlay(sliderElement, timeout, autopause);
// manually updates the indicators active state
swiffyslider.handleIndicators(sliderElement);