Perú

Lima,Perú

Layerslider Implementación

Fecha Publicación:       27 de Febrero de 2019
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.
delayin    =  El tiempo que demora en presentarse en la escena 0 se presenta al inicio.
Leidas : 938 Veces
Compartir: