Plugin Lory para crear sliders en diferentes formas

DESCARGA : Lory

Plugin Lory para crear sliders en diferentes formas, lory es un deslizador minimalista escrito en JavaScript básico, en este plugin te puedes encontrar con las siguientes opciones que le dan un toque diferente a la presentación de sliders.

  1. Hardware acelerado
  2. Realizado con  jQuery
  3. Opciones para efectos personalizados
  4. Bucle infinito ~ carrusel

Antes de iniciar puedes ver el ejemplo: http://meandmax.github.io/lory/

 

Este plugin, crea sliders con todo tipo de contenido, si necesitas imágenes, texto, vídeos y en general todo contenido html, lo primero que tienes que hacer es crear la estructura html de la siguiente forma:

<div class="slider js_simple simple">
<div class="frame js_frame">
<ul class="slides js_slides">
<li class="js_slide">1</li>
<li class="js_slide">2</li>
<li class="js_slide">3</li>
<li class="js_slide">4</li>
<li class="js_slide">5</li>
<li class="js_slide">6</li>
</ul>
</div>
</div>

Posteriormente a esto tienes que crear los estilos en un formato .css, esto con el objetivo de controlar las posiciones:

.frame {
position: relative;
font-size: 0;
line-height: 0;
overflow: hidden;
white-space: nowrap;
}

.slides {
display: inline-block;
}

li {
position: relative;
display: inline-block;
}

Una vez que agregas el css, agregas también el control de los elementos en javascript:

document.addEventListener('DOMContentLoaded', function () {
var variableWidth = document.querySelector('.js_variablewlidth');

lory(variableWidth, {
rewind: true
});
});



El resultado puede manipularse de acuerdo a las opciones que manejes en el script por ejemplo puedes agregar el siguiente script para scroll infinito:



document.addEventListener('DOMContentLoaded', function () {
var multiSlides = document.querySelector('.js_multislides');

lory(multiSlides, {
infinite: 4,
slidesToScroll: 4
});
});

 

You may also like...