Básico slider carrusel plugin para JavaScript-SMSlider

Vista prévia

Descripción

SMSlider es un simple pero configurable Slider plugin de JavaScript para crear sus propios carruseles en la aplicación Web.

Características

• Autoplay
• Vertical or horizontal sliding.
• Controles de paginación y navegación.
• Permite deslizarse a través de diapositivas mediante el arrastre del ratón.
• Navegación por miniaturas.
• Funciones de aceleración.
• Soporta cualquier elemento no sólo imágenes.

Funcionamiento

Inserte el archivo JavaScript incluido en el documento.

<script src="sm_slider.js"></script>

La estructura HTML del control deslizante.

<div id="mySlider">

<div>


Text slide

</div>

<div>


 <img src="1.jpg" alt="">

</div>

<div>


 <img src="2.jpg" alt="">

</div>
</div>

Inicialice el control deslizante y especifique el elemento contenedor.

var instance = new SMSlider({


container: "mySlider"
});

Configuración del control deslizante pasando las siguientes opciones para el SMSlider objeto.

var instance = new SMSlider({



// enables autoplay


autoplay : true,



// current slide index


currentSlide: 0,



// shows navigation


navigator : true,



// shows pagination


dots : true,



// background color


background: '#eff1f4',



// how many slides per view


slidesInView: 1,



// is swipeable?


swipeable: true,



// in seconds


sliderTransitionTime: 2,



// or 'vertical'


direction: 'horizontal',



// border property


border: 'none',



// enables thumbnails navigation


thumbnails: false,



// how many thumbnails per view


thumbnailsInView: 3,



// 'ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out'


transitionFlow: 'ease'



});

Métodos de API disponibles para controlar el control deslizante mediante programación.

// display a specific slide
instance.displaySlide(index)

// backs previous one
instance.moveSlideBackward()

// go to next one
instance.moveSlideForward()