Sliders

Conceptos básicos #

Clerk.js viene con una función incorporada para mostrar productos con sliders. Esta función muestra una fila de productos con un conjunto de flechas, que permite a los clientes navegar entre muchos productos con solo unos pocos clics.

Básicamente, funciona creando una larga lista horizontal de productos, y luego mostrando una “ventana” fija de productos a la vez, la cual se controla con los botones.

La funcionalidad del slider está programada para mostrar una nueva fila entera de productos por cada clic, para mostrar la mayor cantidad de productos nuevos posible con el menor número de clics.

Editor de diseño #

Al crear diseños con el Editor de Diseño, los diseños de plantilla vienen con el componente de slider preseleccionado.

El componente Slider tiene varias opciones para personalizar su apariencia:

• Cantidad de elementos a mostrar según el tamaño de pantalla
• Varios estilos de botones
• Posición de las flechas

Diseños por código #

Para los diseños por código, agregar la clase clerk-slider en el contenedor mostrará el diseño como un slider:

<ul class="product-list clerk-slider">
    {% for product in products %}
      <li class="product">
        <h2 class="product-name">{{ product.name }}</h2>
 
        <img src="{{ product.image }}" title="{{ product.name }}" />
 
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </li>
    {% endfor %}
  </ul>

Diseños estándar #

El diseño estándar para Sliders incluye:

• Soporte para desplegables de variantes: permite a los compradores elegir atributos de variantes (por ejemplo, talla, color) antes de añadir al carrito.
• Selector de cantidad.
• Botón nativo de Add-to-Cart que notifica a Clerk.js, asegurando que la analítica y la gestión de productos permanezcan sincronizadas.
• Marcado limpio, bien estructurado y con comentarios claros.
• Variables centralizadas para el estilo y el comportamiento, facilitando el ajuste de colores, espaciado, etiquetas y opciones comunes sin cambiar el código principal.

Flechas personalizadas para slider #

Si deseas usar tus propias flechas para el slider, o quieres cambiar su ubicación, puedes agregar CSS a las siguientes clases.

El nuevo estilo se puede agregar como parte del Diseño en my.clerk.io. o simplemente en tu hoja de estilos existente.

<style type="text/css">
    @keyframes arrowPop {
        0% {
            width: 20%;
        }
        50% {
            width: 0%;
        }
        100% {
            width: 20%;
        }
    }

    .clerk-slider-nav {
        background: #333;
        border-radius:50%;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:0;
        opacity:0.8;
        filter: drop-shadow(0 0 5px #333);
        transition:0.3s ease;
    }

    .clerk-slider-nav:hover {
        opacity:1;
        transition:0.3s ease;
    }
    .clerk-slider-nav:hover:before {
        animation:arrowPop 0.3s ease;
    }
    .clerk-slider-nav-next {
        flex-direction:row-reverse;
    }

    .clerk-slider-nav:after {
        content:"";
        display:block;
        height:40%;
        width:40%;
        transform: rotate(45deg);
        border: solid white;
    }
    .clerk-slider-nav-prev:after {
        border-width: 0px 0px 2px 2px;
    }

    .clerk-slider-nav-next:after {
        border-width: 2px 2px 0px 0px;
    }

    .clerk-slider-nav:before {
        content:"";
        width:20%;
    }
</style>