Recommendations

Sliders

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

Fondamenti #

Clerk.js viene fornito con una funzione integrata per mostrare prodotti con slider. Questa funzione mostra una fila di prodotti con un insieme di frecce, che consente ai clienti di navigare tra molti prodotti con solo pochi clic.

Funziona fondamentalmente creando un lungo elenco orizzontale di prodotti e poi mostrando una “finestra” fissa di prodotti alla volta, controllata con i pulsanti.

La funzionalità dello slider è codificata per mostrare un’intera nuova fila di prodotti per ogni clic, per mostrare il maggior numero possibile di nuovi prodotti con il minor numero possibile di clic.

Editor di Design #

Quando si creano design con l’ Editor di Design, i design del modello vengono forniti con il componente slider pre-selezionato.

Il componente Slider viene fornito con una serie di opzioni per consentirti di personalizzarne l’aspetto:

Numero di articoli da mostrare in base alla dimensione dello schermo
Diversi stili di pulsante
Posizione delle frecce

Design del Codice #

Per i design del codice, aggiungere la classe clerk-slider nel contenitore visualizzerà il design come uno 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 }}">Acquista ora</a>
      </li>
    {% endfor %}
  </ul>

Stile Personalizzato #

Se desideri utilizzare le tue frecce dello slider, o vuoi cambiare la loro posizione, puoi aggiungere CSS alle classi sottostanti.

Il nuovo stile può essere aggiunto come parte del Design in my.clerk.io. o semplicemente 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.