Slider Carrusel - Bsale-IO/template-docs GitHub Wiki

Para slider de otro tipo ver:

Slider nuevo, sólo templates nuevos

Junto con el lanzamiento de campañas se reestructuró el slider para permitir agregar imágenes mobile, descripciones y una gestión dinámica Para esto se cambió el selector por tag, para que un slider aparezca en el home es necesario asignarle un tag

Nuevas funciones

  1. Permite carga de imagen mobile y desktop por slide(diapositiva).
  2. Permite agregar descripción a la imagen para mejorar SEO.
  3. Implementación de tag para dinamizar la administración de los slider(carruseles). Ahora sólo necesitas definir el tag que usará el slider sin necesidad de editar el componente dentro del cual se cargará

Limitantes

No se pueden ocultar diapositivas en su versión mobile o escritorio, si necesitas cargas slider(carruseles) diferentes para cada versión del sitio debes cargar dos componentes y ocultar mediante css según dimensión de la pantalla

Componente Versión SEPTIEMBRE 2024

{% comment %} Versión SEPTIEMBRE 2024 {% endcomment %}
{% capture nav %}
"nav":true,
"navText": [ "<i class=\"fas fa-angle-left\"></i>", "<i class=\"fas fa-angle-right\"></i>" ],
{% endcapture %}

<section data-bs='slider' data-info='{{ nav | prepend: '{' }}{{ slider.options | replace_first:'{',""}}' class="owl-carousel bs-owl-compact owl-theme">                                
  {% for slide in slider.slides %}
    {% capture imgSource %}
      <picture>
        {% if slide.imageMobileUrl.size > 0 and slide.imageUrl.size > 0 %}
          {% comment %} Tiene desktop y mobile {% endcomment %}
          <source {{ slide.imageUrl | source_tag_attributes : 'O', media: false }} media="(min-width: 1201px)">
          <source {{ slide.imageUrl | source_tag_attributes : 'X', media: false }} media="(min-width: 801px)">
          <source {{ slide.imageUrl | source_tag_attributes : 'L', media: false }} media="(min-width: 768px)">
          <source {{ slide.imageMobileUrl | source_tag_attributes : 'L', media: false }} media="(min-width: 401px)">
          <source {{ slide.imageMobileUrl | source_tag_attributes : 'M', media: false }} media="(min-width: 241px)">
          <source {{ slide.imageMobileUrl | source_tag_attributes : 'S', media: false }} media="(min-width: 101px)">
          <source {{ slide.imageMobileUrl | source_tag_attributes : 'T', media: false }} media="(min-width: 0px)">
          <img class="item-img" 
               {{ slide.imageUrl | img_tag_attributes:'T' }}
               title="{{ slide.description }}" 
               alt="{{ slide.description }}" 
               {% if forloop.first %} loading="eager" fetchpriority="high" {% else %} loading="lazy" {% endif %}>
          
        {% elsif slide.imageMobileUrl.size > 0 %}
          {% comment %} Tiene sólo mobile {% endcomment %}
          <source {{ slide.imageMobileUrl | source_tag_attributes: 'O', media: false }} media="(min-width: 1201px)">
          <source {{ slide.imageMobileUrl | source_tag_attributes: 'X', media: false }} media="(min-width: 801px)">
          <source {{ slide.imageMobileUrl | source_tag_attributes: 'L', media: false }} media="(min-width: 768px)">
          <source {{ slide.imageMobileUrl | source_tag_attributes: 'M', media: false }} media="(min-width: 401px)">
          <source {{ slide.imageMobileUrl | source_tag_attributes: 'S', media: false }} media="(min-width: 241px)">
          <source {{ slide.imageMobileUrl | source_tag_attributes: 'T', media: false }} media="(min-width: 0px)">
          <img class="item-img" 
               {{ slide.imageMobileUrl | img_tag_attributes:'T' }}
               title="{{ slide.description }}" 
               alt="{{ slide.description }}" 
               {% if forloop.first %} loading="eager" fetchpriority="high" {% else %} loading="lazy" {% endif %}>
          
        {% elsif slide.imageUrl.size > 0 %}
          {% comment %} Tiene sólo desktop {% endcomment %}
          <source {{ slide.imageUrl | source_tag_attributes: 'O', media: false }} media="(min-width: 1201px)">
          <source {{ slide.imageUrl | source_tag_attributes: 'X', media: false }} media="(min-width: 801px)">
          <source {{ slide.imageUrl | source_tag_attributes: 'L', media: false }} media="(min-width: 768px)">
          <source {{ slide.imageUrl | source_tag_attributes: 'M', media: false }} media="(min-width: 401px)">
          <source {{ slide.imageUrl | source_tag_attributes: 'S', media: false }} media="(min-width: 241px)">
          <source {{ slide.imageUrl | source_tag_attributes: 'T', media: false }} media="(min-width: 0px)">
          <img class="item-img" 
               {{ slide.imageUrl | img_tag_attributes:'T' }}
               title="{{ slide.description }}" 
               alt="{{ slide.description }}" 
               {% if forloop.first %} loading="eager" fetchpriority="high" {% else %} loading="lazy" {% endif %}>
        {% endif %}
      </picture>
    {% endcapture %}
    
    <div class="item {% if forloop.first %} owl-first-slide {% endif %}">
      {% if slide.itemUrl != "" %}
        <a href="{{ slide.itemUrl }}" title="{{ slide.description }}">{{ imgSource }}</a>
      {% else %}
        {{ imgSource }}
      {% endif %}
    </div>
  {% endfor %}
</section>

<style>
  .owl-carousel { display: block; }
  .owl-carousel .item { display: none; }
  .owl-loaded .item { display: block; }
  .item.owl-first-slide { display: block; }
  .item-img { width: 100%; height: auto; }
</style>

Componente Versión SEPTIEMBRE 2022

{% comment %} version SEPTIEMBRE 2022 {% endcomment %}
{% capture nav %}
"nav":true,
"navText": [ "<i class=\"fas fa-angle-left\"></i>", "<i class=\"fas fa-angle-right\"></i>"],
{% endcapture %}

<section data-bs='slider' data-info='{{ nav | prepend: '{' }}{{ slider.options | replace_first:'{',""}}' class="owl-carousel bs-owl-compact owl-theme">                                
    {% for slide in slider.slides %}
        {% capture imgSource %}
            <picture >
            {% if slide.imageMobileUrl.size > 0  and slide.imageUrl.size > 0 %}
                {% comment %}tiene desktop y mobile {% endcomment %}
                <source  srcset="{{ slide.imageUrl | image_url: 'O' }}" media="(min-width: 1201px)">
                <source  srcset="{{ slide.imageUrl | image_url: 'X' }}" media="(min-width: 801px)">
                <source  srcset="{{ slide.imageUrl | image_url: 'L' }}" media="(min-width: 768px)">
                <source  srcset="{{ slide.imageMobileUrl | image_url: 'L' }}" media="(min-width: 401px)">
                <source  srcset="{{ slide.imageMobileUrl | image_url: 'M' }}" media="(min-width: 241px)">
                <source  srcset="{{ slide.imageMobileUrl | image_url: 'S' }}" media="(min-width: 101px)">
                <source  srcset="{{ slide.imageMobileUrl | image_url: 'T' }}" media="(min-width: 0px)">
                <img    class="item-img"  src="{{ slide.imageUrl | image_url: 'T' }}" 
                        title="{{ slide.description }}" alt="{{ slide.description }}" 
                        {% unless forloop.first %} loading="lazy"{% endunless %}>{% elsif slide.imageMobileUrl.size > 0 %}>
                {% comment %} tiene sólo mobile {% endcomment %}
                <source  srcset="{{ slide.imageMobileUrl | image_url: 'O' }}" media="(min-width: 1201px)">
                <source  srcset="{{ slide.imageMobileUrl | image_url: 'X' }}" media="(min-width: 801px)">
                <source  srcset="{{ slide.imageMobileUrl | image_url: 'L' }}" media="(min-width: 401px)">
                <source  srcset="{{ slide.imageMobileUrl | image_url: 'M' }}" media="(min-width: 241px)">
                <source  srcset="{{ slide.imageMobileUrl | image_url: 'S' }}" media="(min-width: 101px)">
                <source  srcset="{{ slide.imageMobileUrl | image_url: 'T' }}" media="(min-width: 0px)">
                <img    class="item-img"  src="{{ slide.imageMobileUrl | image_url: 'T' }}"
                        title="{{ slide.description }}" alt="{{ slide.description }}" 
                        {% unless forloop.first %} loading="lazy"{% endunless %}>{% elsif slide.imageMobileUrl.size > 0 %}>
            {% elsif slide.imageUrl.size > 0 %}
                {% comment %} tiene sólo desktop {% endcomment %}
                <source  srcset="{{ slide.imageUrl | image_url: 'O' }}" media="(min-width: 1201px)">
                <source  srcset="{{ slide.imageUrl | image_url: 'X' }}" media="(min-width: 801px)">
                <source  srcset="{{ slide.imageUrl | image_url: 'L' }}" media="(min-width: 401px)">
                <source  srcset="{{ slide.imageUrl | image_url: 'M' }}" media="(min-width: 241px)">
                <source  srcset="{{ slide.imageUrl | image_url: 'S' }}" media="(min-width: 101px)">
                <source srcset="{{ slide.imageUrl | image_url: 'T' }}" media="(min-width: 0px)">
                <img    class="item-img" src="{{ slide.imageUrl | image_url: 'T' }}"
                        title="{{ slide.description }}" alt="{{ slide.description }}" 
                        {% unless forloop.first %} loading="lazy"{% endunless %}>{% elsif slide.imageMobileUrl.size > 0 %}>
            {% endif %}
            </picture> 
        {% endcapture %}
        <div class="item {% if forloop.first %} owl-first-slide{% endif %}">
            {%if slide.itemUrl != "" %}
                <a href="{{slide.itemUrl}}" title="{{ slide.description }}">{{imgSource}}</a>
            {% else %}
                {{imgSource}}
            {% endif %}
        </div>
    {% endfor %}
</section>

<style>
.owl-carousel{display:block;}
.owl-carousel .item{display:none;}
.owl-loaded .item{display:block;}
.item.owl-first-slide{display:block}
.item-img{width:100%;height:auto;}
</style>

Componente Versión SEPTIEMBRE 2021

<!-- Versión Septiembre 2022 -->
<section data-bs='slider' 
         data-info='{% if slider.options.size > 2 %}{{ slider.options | replace_first: '"' , '"lazyLoad":true,"'}}
                    {%else%}{"items":1,"lazyLoad":true, "loop": true, "nav":true}
                    {% endif %}' 
         class="owl-carousel bs-owl-compact owl-theme">
                                     
    {% for slide in slider.slides %}
        
        {% if slide.description != "" %}
            {% assign title = slide.description %}
        {% elsif slide.itemUrl != "" %}
            {% assign title = slide.itemUrl | replace:canonical_url, "" | replace:"/collection/" ,"" | replace:"/product/" ,""  | replace:"/brand/" ,""  | replace:"-" ," " | replace:"/" ," " %}
        {% elsif slide.imageUrl.size > 0 %}
            {% assign title = slide.imageUrl | slice: 45 , slide.imageUrl.size | replace: ".jpg","" | replace: ".png","" | replace: ".gif","" | replace: "_"," " | replace: "-", " " %}
        {% elsif slide.imageMobileUrl.size > 0 %}
            {% assign title = slide.imageMobileUrl | slice: 45 , slide.imageMobileUrl.size | replace: ".jpg","" | replace: ".png","" | replace: ".gif","" | replace: "_"," " | replace: "-", " " %}
        {% endif %}
        
        
        {% capture imgSource %}
            {% if forloop.first %}
                <picture >
                    {% if slide.imageMobileUrl.size > 0  and slide.imageUrl.size > 0 %}
                    <!--tiene desktop y mobile -->
                        <source  srcset="{{ slide.imageUrl | image_url: 'O' }}" media="(min-width: 1201px)">
                        <source  srcset="{{ slide.imageUrl | image_url: 'X' }}" media="(min-width: 801px)">
                        <source  srcset="{{ slide.imageUrl | image_url: 'L' }}" media="(min-width: 768px)">
                        <source  srcset="{{ slide.imageMobileUrl | image_url: 'L' }}" media="(min-width: 401px)">
                        <source  srcset="{{ slide.imageMobileUrl | image_url: 'M' }}" media="(min-width: 241px)">
                        <source  srcset="{{ slide.imageMobileUrl | image_url: 'S' }}" media="(min-width: 101px)">
                        <source  srcset="{{ slide.imageMobileUrl | image_url: 'T' }}" media="(min-width: 0px)">
                        <img    class="item-img"  src="{{ slide.imageUrl | image_url: 'X' }}" title="{{title}}" alt="{{title}}" loading="eager">
                    {% elsif slide.imageMobileUrl.size > 0 %}
                    <!--tiene sólo mobile -->
                        <source  srcset="{{ slide.imageMobileUrl | image_url: 'O' }}" media="(min-width: 1201px)">
                        <source  srcset="{{ slide.imageMobileUrl | image_url: 'X' }}" media="(min-width: 801px)">
                        <source  srcset="{{ slide.imageMobileUrl | image_url: 'L' }}" media="(min-width: 401px)">
                        <source  srcset="{{ slide.imageMobileUrl | image_url: 'M' }}" media="(min-width: 241px)">
                        <source  srcset="{{ slide.imageMobileUrl | image_url: 'S' }}" media="(min-width: 101px)">
                        <source  srcset="{{ slide.imageMobileUrl | image_url: 'T' }}" media="(min-width: 0px)">
                        <img    class="item-img"  src="{{ slide.imageMobileUrl | image_url: 'X' }}" title="{{title}}" alt="{{title}}" loading="eager">
                    {% elsif slide.imageUrl.size > 0 %}
                    <!--tiene sólo desktop -->
                        <source  srcset="{{ slide.imageUrl | image_url: 'O' }}" media="(min-width: 1201px)">
                        <source  srcset="{{ slide.imageUrl | image_url: 'X' }}" media="(min-width: 801px)">
                        <source  srcset="{{ slide.imageUrl | image_url: 'L' }}" media="(min-width: 401px)">
                        <source  srcset="{{ slide.imageUrl | image_url: 'M' }}" media="(min-width: 241px)">
                        <source  srcset="{{ slide.imageUrl | image_url: 'S' }}" media="(min-width: 101px)">
                        <source srcset="{{ slide.imageUrl | image_url: 'T' }}" media="(min-width: 0px)">
                        <img    class="item-img" src="{{ slide.imageUrl | image_url: 'X' }}" title="{{title}}" alt="{{title}}" loading="eager">
                    {% endif %}
                </picture>
            {%else %}
                <picture >
                    {% if slide.imageMobileUrl.size > 0  and slide.imageUrl.size > 0 %}
                    <!--tiene desktop y mobile -->
                        <source class="owl-lazy" data-srcset="{{ slide.imageUrl | image_url: 'O' }}" media="(min-width: 1201px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageUrl | image_url: 'X' }}" media="(min-width: 801px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageUrl | image_url: 'L' }}" media="(min-width: 768px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageMobileUrl | image_url: 'L' }}" media="(min-width: 401px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageMobileUrl | image_url: 'M' }}" media="(min-width: 241px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageMobileUrl | image_url: 'S' }}" media="(min-width: 101px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageMobileUrl | image_url: 'T' }}" media="(min-width: 0px)">
                        <img    class="owl-lazy" src="{{ slide.imageUrl | image_url: 'T' }}" title="{{title}}" alt="{{title}}" loading="lazy">
                    {% elsif slide.imageMobileUrl.size > 0 %}
                    <!--tiene sólo mobile -->
                        <source class="owl-lazy" data-srcset="{{ slide.imageMobileUrl | image_url: 'O' }}" media="(min-width: 1201px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageMobileUrl | image_url: 'X' }}" media="(min-width: 801px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageMobileUrl | image_url: 'L' }}" media="(min-width: 401px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageMobileUrl | image_url: 'M' }}" media="(min-width: 241px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageMobileUrl | image_url: 'S' }}" media="(min-width: 101px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageMobileUrl | image_url: 'T' }}" media="(min-width: 0px)">
                        <img    class="owl-lazy" src="{{ slide.imageMobileUrl | image_url: 'T' }}" title="{{title}}" alt="{{title}}" loading="lazy">
                    {% elsif slide.imageUrl.size > 0 %}
                    <!--tiene sólo desktop -->
                        <source class="owl-lazy" data-srcset="{{ slide.imageUrl | image_url: 'O' }}" media="(min-width: 1201px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageUrl | image_url: 'X' }}" media="(min-width: 801px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageUrl | image_url: 'L' }}" media="(min-width: 401px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageUrl | image_url: 'M' }}" media="(min-width: 241px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageUrl | image_url: 'S' }}" media="(min-width: 101px)">
                        <source class="owl-lazy" data-srcset="{{ slide.imageUrl | image_url: 'T' }}" media="(min-width: 0px)">
                        <img    class="owl-lazy" src="{{ slide.imageUrl | image_url: 'T' }}" title="{{title}}" alt="{{title}}" loading="lazy">
                    {% endif %}
                </picture>
            {% endif %}
        {% endcapture %}
        
        
        <div class="item {% if forloop.first %} owl-first-slide{% endif %}">
            {%if slide.itemUrl != "" %}
                <a href="{{slide.itemUrl}}" title="{{title}}">{{imgSource}}</a>
            {% else %}
                {{imgSource}}
            {% endif %}
        </div>
    {% endfor %}
</section>

<style>
.owl-carousel{
    display:block;
}
.owl-carousel .item{
    display:none;
}
.owl-loaded .item{
    display:block;
}
.item.owl-first-slide{
    display:block;
}
.item-img{
 width:100%;
 height:auto;
}
</style>
<script>
    function owlLazyIExplorer(){var pic = document.querySelectorAll(".owl-carousel picture");for(var i = 1; i < pic.length; i++){var p = pic[i];var source =  p.querySelector("source");var img = p.querySelector("img");img.src = source.dataset.srcset;img.classList.remove("owl-lazy");}}
    (function(){if(navigator.userAgent.indexOf("Trident") > -1){owlLazyIExplorer();}})()
</script>

Variantes

nueva variable descripción
{{ slider.options }} json opciones del slider para inicializarlo mediante js
{{ slider.slides }} array contiene todos los slide del slider (carrusel)
{{ slide.id }} id del slide
{{ slide.imageUrl }} url imagen desktop
{{ slide.imageMobileUrl }} url imagen mobile
{{ slide.description }} descripción / título del slide
{{ slide.itemUrl }} url de destino del slide

Implementación

{{ "tag" | new_get_slider: "componente del slider" }}

Ejemplo

{{ "slider_inicio" | new_get_slider: "Inicio > Slider Principal" }}

para información de la versión anterior ver Slider Carousel Antiguo

⚠️ **GitHub.com Fallback** ⚠️