Es un librería para mejorar el renderizado del sitio

• slick slider

1. Descarga el archivo slider-helper.css
2. Agregalo a los archivos de tu template
3. Inserta el archivo en el componente style css

   <link rel="stylesheet" media="all" href="{{'slider-helper.css' | asset_url}}">

Se debe replicar la configuración del slider utilizando clases para permitir que el slider sea vea igual a cómo está configurado aun cuando no se haya carga la librería JS

• Si el slider tiene configuración "slidesToShow": 6 debe tener las clases slick-horizontal show-6
• Si el slider tiene configuración "slidesToShow": 4 debe tener las clases slick-horizontal show-4
• Si el slider tiene configuración "slidesToShow": 1 debe tener las clases slick-horizontal show-1
• Si el slider tiene configuración "slidesToShow": 8 debe tener las clases slick-horizontal show-8
• El número máximo de ítems es 12, por tanto "slidesToShow": 12 debe tener las clases slick-horizontal show-12

{% capture option_slider %}
        "slidesToShow": 6
{% endcapture %}

<div class="slick-horizontal show-6" 
     data-bs='slider' 
     data-info='{ {{option_slider | strip_newlines | replace: '    ', ''}} }'>
     {% for a in array %}
        <div class="item">
            ...
        </div>
     {% endfor %}
</div>

• Configuración option_slider tiene "slidesToShow": 6
• El slider tiene clase slick-horizontal y show-6
• Elemento hijo del slider tiene clase item

• Los breakpoint son configuraciones según el ancho de pantalla que permiten indicar al slider que cuando se cumple la condición de ancho de la pantalla el slider debe mostrar una cantidad especifica de ítems
• Se permiten 5 breakpoint

1. Quiero que siempre muestre 6 elementos uso la clase show-6

2. Quiero que cuando la pantalla tenga un ancho hasta 768px y muestre 4 elementos, uso la clase

   breakpoint-768-show-4
   

3. Quiero que cuando la pantalla tenga un ancho hasta 768px muestre 4 y además que cuando sea hasta 576px muestre 3 elementos, uso las clases:

   breakpoint-768-show-4 breakpoint-576-show-3
   

Siempre tengo que igualar la configuración del slider con las clases agregadas

{% capture option_slider %}
        "slidesToShow": 6
        "responsive": [
            {
                "breakpoint": 768,
                "settings": {
                    "slidesToShow": 4 
                }
            },{
                "breakpoint": 576,
                "settings": {
                    "slidesToShow": 3
                }
            }
         ]
{% endcapture %}

<div class="slick-horizontal show-6 breakpoint-768-show-4 breakpoint-576-show-3" 
     data-bs='slider' data-info='{ {{option_slider | strip_newlines | replace: '    ', ''}} }'>
    {% for a in array %}
        <div class="item">
            ...
        </div>
    {% endfor %}
</div>

• Si el slider tiene configuración "slidesToShow": 6 debe tener las clases slick-horizontal show-6

• Si el slider tiene configuración

  "breakpoint": 768,
  "settings": {
        "slidesToShow": 4 
    }
  

  debe tener las clases breakpoint-768-show-4

• Si el slider tiene configuración

  "breakpoint": 576,
  "settings": {
        "slidesToShow": 3 
    }
  

  debe tener las clases breakpoint-576-show-3

NO

NO