swiffy-carousel-slider

Super-fast Carousel and Touch Slider For Optimized Websites | Swiffy Slider

by

Swiffy Slider is a very fast, lightweight, and touch slider carousel for websites optimized for running in modern browsers.

The modern browser offers really good options these days to create a much better user experience for scrolling sliders and view swirls than the current libraries offer.

  • Navigate with touch, keyboard, trackpad, stylus, and mouse – because it’s just a swipe in the browser
  • Uses native browser scroll behavior, snap scroll, and CSS grid to provide the best mobile touch and touch experience
  • It can be run in CSS only – no-js mode for better performance
  • Easy SEO – All content is purely coded
  • Suitable for WCAG – all content is in pure encoding and can be commented accordingly, supports the use of scheduling, keyboard navigation, song attribution, whatever is required.
  • Setup is done in pure coding classes and CSS, no scripting is required
  • No js upload for slices, config, or config
  • Vanilla JavaScript, less than 1.3KB ~ 110 lines
  • Very low total space ~ 3.5KB in total (css + js gzip’ed)

pure javascript carousel multiple items, pure css carousel slider, carousel html css javascript, 3d carousel javascript, flip through elements in a 3d space carousel js

How to make use of it:

1. Import javascript and stylesheet into Swiffy Slider.

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

2. The basic coding of Swiffy Slider.

<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. Configure slides using the following CSS classes.

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

4. Configure the navigation controls with the following CSS classes.

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

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

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

Versatile Slider & Carousel JavaScript Library, Swiffy Slider Plugin/Github, carousel designs javascript

See Demo And Download

Demo
Download

Official Website(dynamicweb): Click Here

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

Leave a Comment