Creación de un control deslizante de contenido de dispositivo cruzado mediante iSlider. js

Vista prévia

Descripción

iSlider. js es una sencilla biblioteca de JS independiente para crear un deslizador de contenido flexible & totalmente funcional para su sitio web & aplicación.

Características

• Admite cualquier elemento DOM.
• Bucle infinito.
• Rotación automática en cargas de página.
• 4 animaciones incorporadas: rotar, 3D, por defecto y profundidad.
• Tipos de animación personalizados.
• Funciones de devolución de llamada.
• Compatible con dispositivos móviles y táctil.
• Vertical & horizontal sliding.

¿Cómo funciona?

Cargue los archivos de la biblioteca iSlider. js al final del documento para que las páginas se carguen más rápido.

<script src="build/islider.min.js"></script>
<script src="build/iSlider.animate.min.js"></script>

Cargue un complemento de su elección para la biblioteca iSlider. js.

<!-- Boundary plugin -->
<script src="build/iSlider.plugin.BIZone.js"></script>

<!-- Navigation plugin -->
<script src="build/iSlider.plugin.button.js"></script>

<!-- Pagination plugin -->
<script src="build/iSlider.plugin.dot.js"></script>

<!-- Image zoom plugin -->
<script src="build/iSlider.plugin.zoompic.jss"></script>

Cree un elemento vacío que se servirá como contenedor deslizante.

<div id="demo"></div>

Agregue el contenido del control deslizante mediante el objeto de matriz JS.

var myData = [


{content: "1.jpg"},


{content: "2.jpg"},


{content: "3.jpg"},


// ... more data here
];

Inicialice el control deslizante con opciones.

var mySlider = new iSlider({


data: myData,


dom: document.getElementById("demo")
});

Todas las opciones y devoluciones de llamada disponibles para personalizar la biblioteca.

// The DOM element that wraps image list
dom: null,

// An array of contents
data: [],

// default, rotate, depth, flow, flip, card, fade, zoomout
animateType: 'pic',

// animation duration
animateTime: 1000,

// linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier
animateEasing: 'ease'

// interval
duration: 1000,

// default, rotate, flip, depth
animateType: 'default',

// auto disable autoplay
wakeupAutoplayDazetime: true,

// Callbacks
onslide: null,
onslidestart: null,
onslideend: null,
onslidechange: null,

// Debug mode
isDebug: false,

// Infinite loop
isLooping: true,

// damping coefficient
dampingForce: 0

// Auto rotation on page loads
isAutoplay: true,

// vertical or horizontal
isVertical: true,

// background tile
isOverspread: false,

// enable touch events
isTouchable: true,

// initial slide
initIndex: 0,

// interaction scope
// 10px
fingerRecognitionRange: 10,

// Boolean|Array|String
fixPage: true,

// show space between slides
fillSeam: false,

// plugins to activate
plugins: {}

Registro de cambios

v2.2.4 (06/19/2018)

• Bugfix