Deslizador simple contenido JavaScript puro-Vanilla Slider
| Autor: | gsantiago |
|---|---|
| Views Total: | 7,277 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 18, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Le ayuda a crear carruseles/deslizadores de contenido vertical u horizontal con la ayuda de JavaScript puro y CSS/CSS3.
¿Cómo funciona?
Cree una lista de contenido HTML para el control deslizante.
<div class="slider-demo"> <ul> <li> <div class="slide">Slide 1</div> </li> <li> <div class="slide">Slide 2</div> </li> <li> <div class="slide">Slide 3</div> </li> <li> <div class="slide">Slide 4</div> </li> <li> <div class="slide">Slide 5</div> </li> </ul> </div>
El CSS de ejemplo para el estilo del deslizador de contenido.
.slider-demo {
width: 500px;
height: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
margin-bottom: 100px;
}
.slider-demo ul {
list-style: outside none;
width: 10000%;
position: relative;
top: 0;
right: 0;
transition: all 0.6s ease;
padding: 0;
margin: 0;
}
.slider-demo li { float: left; }
.slider-demo {
background-color: #22c3bc;
width: 500px;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 50px;
color: #fff;
} Incluya la Vanilla-Slider. js necesaria al final del documento.
<script src="vanilla-slider.js"></script>
Crear botones de siguiente/preve para controlar el control deslizante manualmente.
<a href="#" class="s-prev">Prev</a> <a href="#" class="s-next">Next</a>
Inicializar el control deslizante de contenido.
var single = new Slider('.slider-demo', {
controlNext: '.s-next',
controlPrev: '.s-prev',
// more options here
); Opciones completas.
visibles: 1, direction: 'horizontal', controlPrev: '', controlNext: '', justify: true, steps: 1, // TO IMPLEMENT: dots: '', touch: true, animation: 'slide', autoPlay: 1000, infinite: true
