Versatile Slider & Carousel JavaScript Library – Swiffy Slider

Category: Javascript , Recommended , Slider | November 11, 2021
Author:dynamicweb
Views Total:322 views
Official Page:Go to website
Last Update:November 11, 2021
License:MIT

Preview:

Versatile Slider & Carousel JavaScript Library – Swiffy Slider

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);

You Might Be Interested In:


2 thoughts on “Versatile Slider & Carousel JavaScript Library – Swiffy Slider

Leave a Reply