Sensible & táctil contenido Slider-Elba. js

Vista prévia

Descripción

Elba. js es un deslizador de contenido JavaScript sensible, táctil, de pantalla completa que tiene la capacidad de comprobar el ancho de la pantalla y cargar en la imagen correcta.

Funcionamiento

Cargue el Elba. CSS requerido en el encabezado del documento.

<link rel="stylesheet" href="path/to/elba.css">

Cargue el script Elba. js al final del documento para mejorar la velocidad de carga de la página.

<script src="path/to/elba.js"></script>

Cree el código HTML para un control deslizante de contenido de pantalla completa. Utilice los atributos Data-src para especificar los orígenes de imagen para diferentes anchos de pantalla. Esto funciona en el ancho de la pantalla con 3 tamaños; por defecto (escritorio), medio (tableta) y pequeño (teléfono inteligente).

<figure id="carousel" class="elba-carousel">

<figure class="elba" data-src="1.jpg" data-src-medium="[email protected]" data-src-large="[email protected]">


<figcaption class="elba-content">



<div class="elba-banner">




<h1>Title 1</h1>




<p>Content 1</p>



</div>


</figcaption>

</figure>

<figure class="elba" data-src="2.jpg" data-src-medium="[email protected]" data-src-large="[email protected]">


<figcaption class="elba-content">



<div class="elba-banner">




<h1>Title 2</h1>




<p>Content 2</p>



</div>


</figcaption>

</figure>

<figure class="elba" data-src="3.jpg" data-src-medium="[email protected]" data-src-large="[email protected]">


<figcaption class="elba-content">



<div class="elba-banner">




<h1>Title 3</h1>




<p>Content 3</p>



</div>


</figcaption>

</figure>
</figure>

Inicialice el control deslizante y establezca los puntos de rotura para imágenes adaptables.

! function(){

var gallery = new Elba( document.getElementById('carousel'), {


slideshow: 8000,


breakpoints: [{



width: 768,



 src: 'data-src-medium'



}, {



width: 1080,



 src: 'data-src-large'


}]

});
}();

Registro de cambios

05/19/2015

• Bugfix