Layerslider Implementación
Fecha Publicación:
27 de Febrero de 2019
Fecha Modificación:
20 de Febrero de 2021
Implementando Layerslider v5.3.0 ve a tambien Layerslider v6
Incluyendo archivos de recursos
<!-- LayerSlider stylesheet -->
<link rel="stylesheet" href="/layerslider/css/layerslider.css" type="text/css">
<!-- External libraries: jQuery & GreenSock -->
<script src="/layerslider/js/jquery.js" type="text/javascript"></script>
<script src="/layerslider/js/greensock.js" type="text/javascript"></script>
<!-- LayerSlider script files -->
<script src="/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
<script src="/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
Asegúrese de introducir la ruta correcta para estos archivos en función de la ubicación de la carpeta layerslider en su servidor.
jQuery y GreenSock son bibliotecas externas. Asegúrese de no insertar una versión duplicada si su sitio ya se los utiliza.
Slider setup
<script type="text/javascript">
var cSliderLayerSlider5 = jQuery.noConflict();
// Running the code when the document is ready
$(document).ready(function(){
// Calling LayerSlider on the target element
$('#layerslider').layerSlider({
autoStart: true,
responsive:true,
skinsPath: '/include/propaganda-cambiante/LayerSlider-5-3-0/skins/'
// Slider options goes here,
// please check the 'List of slider options' section in the documentation
});
});
</script>Crear el contenedor
El tamaño inicial del contenedor está definido en style . Puede cambiar estos valores para especificar sus dimensiones preferidas.
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- The contents on your slider will be here -->
</div>Creación de diapositivas
Después de crear el contenedor se agrega las diapositivas.
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- first slide -->
<div class="ls-slide">
<!-- slide contents goes here -->
</div>
<!-- second slide -->
<div class="ls-slide">
<!-- slide contents goes here -->
</div>
<!-- third slide -->
<div class="ls-slide">
<!-- slide contents goes here -->
</div>
</div>Layer transitions (transiciones de capa)
Las opciones de transición se pueden configurar con el atributo data-ls
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- slide -->
<div class="ls-slide" data-ls="slidedelay: 4000; transition2d: 2,7,9;">
<!-- slide background -->
<img src="..." class="ls-bg" alt="Slide thumbnail">
<!-- image layer -->
<img src="..." class="ls-l" data-ls="offsetxin: left; rotatein: 90;" style="top: 10px; left: 10px;" alt="Image layer">
<!-- text layer -->
<h3 class="ls-l" data-ls="offsetxin: 0; offsetyin: -30;" style="top: 50%; left: 50%;">I'm a text layer!</h3>
</div>
</div>ejemplo:
Poner un background de fondo:
<img src="fondo-design.png" class="ls-bg" alt="Slide background"/>Imagen deslizante de izquierda a derecha:
<img src="responsive-design.png" class="ls-l"
style="top:50px;left:85%;white-space: nowrap;"
data-ls="offsetxin:-1200;offsetyin:-0;
durationin:3000;delayin:500;">offsetxin = signo negativo desplazamiento horizontal de izquierda a la derecha.
offsetxin = signo positivo desplazamiento horizontal de derecha a la izquierda.
left: 85% = 0% se posiciona a la izquierda y 100% se posiciona mas a la derecha.
left: 85% = 0% se posiciona a la izquierda y 100% se posiciona mas a la derecha.
delayin = El tiempo que demora en presentarse en la escena 0 se presenta al inicio.