Fancy SVG ruta Slider-path-Slider. js

Vista prévia

Descripción

path-Slider. js es una biblioteca de slider JavaScript elegante y configurable que le permite diapositivas elementos a lo largo de rutas SVG .

Funcionamiento

Importe las bibliotecas necesarias anime. js y path-Slider. js en la Página Web.

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

Agregue sus propios elementos deslizantes al contenedor deslizador de ruta.

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

Inicialice el control deslizante de ruta y especifique la ruta SVG & selector CSS de elementos deslizantes.

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

Opciones posibles para personalizar el deslizador de ruta.

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