Sliders
Conceptos básicos #
Clerk.js viene con una función integrada para mostrar productos con deslizadores. Esta característica muestra una fila de productos con un conjunto de flechas, que permite a los clientes navegar por 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, que se controla con los botones.
La funcionalidad del deslizador está codificada para mostrar una fila completamente nueva de productos por cada clic, para mostrar tantos productos nuevos como sea posible con la menor cantidad de clics posible.
Editor de Diseño #
Al crear diseños con el Editor de Diseño, los diseños de plantilla vienen con el componente del deslizador preseleccionado.
El componente del Deslizador viene con una serie de opciones para permitirte personalizar su apariencia:
- Cantidad de elementos a mostrar por tamaño de pantalla
- Varios estilos de botones
- Posición de las flechas
Diseños de Código #
Para
diseños de código, agregar la clase clerk-slider en el contenedor mostrará el diseño como un deslizador:
<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 }}">Comprar ahora</a>
</li>
{% endfor %}
</ul>
Estilo Personalizado #
Si deseas usar tus propias flechas de deslizador, o quieres cambiar su ubicación, puedes agregar CSS a las clases a continuación.
El nuevo estilo se puede agregar como parte del Diseño en my.clerk.io. o simplemente en tu hoja de estilo 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>
Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.