Receptivo & Touch Enabled carrusel/Slider-Slider. js

Vista prévia

Descripción

Slider. js es una sencilla biblioteca de JavaScript que se utiliza para crear un carrusel/deslizador de imagen adaptable con capacidad para dispositivos móviles con varias opciones de personalización.

Características

• Redimensionar automáticamente para ajustarse a cualquier tamaño de pantalla.
• Toque para dispositivos móviles habilitados.
• Paginación inferior.
• < span style = "color: #000000;" > anclas anteriores/siguientes para la navegación hacia adelante y hacia atrás.

Uso básico

Agregue el script Slider. js y otros recursos necesarios en el documento.

<link rel="stylesheet" href="_css/slider.css">

<script src="_js/functions.js"></script>
<script src="_js/slider.js" ></script>

Inserte las imágenes en una lista HTML y envuelva la lista HTML en un contenedor DIV como se muestra a continuación.

<div id="slider" class="slider-wrapper">

<ul class="items-holder>


<li class="item"><img src="_photos/photo_1.jpg" /></li>


<li class="item"><img src="_photos/photo_2.jpg" /></li>


<li class="item"><img src="_photos/photo_3.jpg" /></li>


...

</ul>
</div>

El JavaScript para habilitar el carrusel/Slider de imágenes con paginación, anclas anteriores/siguientes y toque para dispositivos móviles habilitados.

var slider;

window.onload = function(){



// Initiate slider

slider = new Slider( document.getElementById('slider').getElementsByTagName('ul')[0], {


duration: 600

} );



// Set the number of items to 1, add pagination, previous and next anchors and start playing

slider.setItemsNum(1).addPagination().addPrevNextAnchors().enableTouch();



// Handler for more or less anchors

function anchorClick( e )

{


if( !e ) var e = window.event;




// Get event object






e.returnValue = false;






// Prevent default action


if( e.preventDefault ) e.preventDefault();








if(this.className == 'less')



slider.setItemsNum(slider.getItemsNum() - 1).addPagination().addPrevNextAnchors();


else



slider.setItemsNum(slider.getItemsNum() + 1).addPagination().addPrevNextAnchors();



}



// Get anchors

anchors = document.getElementById('more-less').getElementsByTagName( 'a' );



// Assign click event

for( var i = 0, x = anchors.length; i < x; i++ )


anchors[i].onclick = anchorClick;



}; // window.onload