Recommendations

Sliders

Rendi facile per i clienti vedere più prodotti con meno clic

Basi #

Clerk.js include una funzione integrata per mostrare i prodotti con slider. Questa funzione mostra una fila di prodotti con una serie di frecce, che permette ai clienti di navigare tra molti prodotti con pochi clic.

Fondamentalmente funziona creando una lunga lista orizzontale di prodotti, e poi mostrando una “finestra” fissa di prodotti alla volta, controllata tramite i pulsanti.

La funzionalità dello slider è progettata per mostrare un’intera nuova riga di prodotti ad ogni clic, in modo da mostrare quanti più prodotti possibile con il minor numero di clic.

Design Editor #

Quando si creano design con il Design Editor, i template hanno il componente slider preselezionato.

Il componente Slider offre diverse opzioni che permettono di personalizzare il suo aspetto:

Quantità di elementi da mostrare in base alla dimensione dello schermo
Vari stili di pulsante
Posizione delle frecce

Code Designs #

Per i code designs, aggiungendo la classe clerk-slider al contenitore, il design verrà visualizzato come 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>

Frecce personalizzate per lo slider #

Se vuoi usare le tue frecce personalizzate per lo slider, o modificarne la posizione, puoi aggiungere CSS alle classi sottostanti.

Il nuovo stile può essere aggiunto come parte del Design su my.clerk.io. oppure direttamente nel tuo foglio di stile esistente.

<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>

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.