Fancy SVG Path Slider – path-slider.js

Preview:

Description:

path-slider.js is a fancy and configurable JavaScript slider library that allows you slides elements along SVG paths.

How to use it:

Import the necessary anime.js and path-slider.js libraries into the webpage.

<script src="js/anime.min.js"></script>
<script src="js/path-slider.js"></script>

Add your own slider items to the Path Slider container.

<div class="path-slider">
  <a href="#" class="path-slider__item path-slider__item--1">Slide 1</a>
  <a href="#" class="path-slider__item path-slider__item--2">Slide 2</a>
  <a href="#" class="path-slider__item path-slider__item--3">Slide 3</a>
  <a href="#" class="path-slider__item path-slider__item--4">Slide 4</a>
  <a href="#" class="path-slider__item path-slider__item--5">Slide 5</a>
</div>

Initialize the Path Slider and specify the SVG path & CSS selector of slider items.

var mySlider = new PathSlider(path, items, options);

Possible options to customize the Path Slider.

var options = {
    // Length of the path to start position the elements
    startLength: 'center'
    // Separation between active item and adjacent items
    activeSeparation: 0,
    // Padding separation at the beginning and end of the path
    paddingSeparation: 0,
    // Refer to anime.js library options
    duration: 1000,
    delay: 0,
    easing: 'easeInOutCubic',
    elasticity: undefined,
    // Delay among animations of each item
    stagger: 0,
    
    // Enable/disable rotate
    rotate: false,
    // Triggered before each item animation starts
    begin: undefined,
    // Triggered after each item animation ends
    end: undefined,
    // Triggered before all the animations starts
    beginAll: undefined,
    // Triggered after all the animations ends
    endAll: undefined,
    // Add listeners for `click` events in every item to allow selecting them
    clickSelection: true
    
}

API methods.

// Select the prev item
mySlider.selectPrevItem();
// Select the next item
mySlider.selectNextItem();
// Select any item using the corresponding index
mySlider.selectItem(index);