Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Carousel CSS only

  1. #1

    Carousel CSS only

    Ciao a tutti, purtroppo da diverse ore non riesco a risolvere il problema. Probabilmente dimentico qualcosa. Potete trovare il carousel a cui mi riferisco qui: è quello sotto la voce OFFERTE SPECIALI, con un esempio di prodotti in offerta. Come potete vedere, alla fine della lista, l'animazione si interrompe per ricominciare daccapo, mentre dovrebbe essere fluida e proseguire dal primo prodotto. In altre parole, non si dovrebbe avvertire alcun "salto".

    Veniamo al codice CSS che posso modificare liberamente:

    codice:
    /* Slider di prodotti scelti */@media all and (min-width: 800px) {
    div.wc-block-grid {
        overflow-x: hidden !important;
    }
    ul.wc-block-grid__products {
        display: flex;
        display: -webkit-flex;
        flex-flow: row nowrap;
        -webkit-flex-flow: row nowrap;
        align-items: stretch;
        -webkit-align-items: stretch;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        margin-top: 10px;
        margin-bottom: 0px;
        -webkit-animation: marquee 10s linear infinite running;
      -moz-animation: marquee 10s linear infinite running;
      -o-animation: marquee 10s linear infinite running;
      -ms-animation: marquee 10s linear infinite running;
      animation: marquee 10s linear infinite running;
    }
    ul.wc-block-grid__products:hover {
      -webkit-animation-play-state: paused;
      -moz-animation-play-state: paused;
      -o-animation-play-state: paused;
      -ms-animation-play-state: paused;
      animation-play-state: paused;
    }
    @-moz-keyframes marquee {
      0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
      }
      100% {
        -webkit-transform: translate(-50%);
        -moz-transform: translate(-50%);
        -o-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%);
      }
    }
    @-webkit-keyframes marquee {
      0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
      }
      100% {
        -webkit-transform: translate(-50%);
        -moz-transform: translate(-50%);
        -o-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%);
      }
    }
    @-o-keyframes marquee {
      0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
      }
      100% {
        -webkit-transform: translate(-50%);
        -moz-transform: translate(-50%);
        -o-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%);
      }
    }
    @keyframes marquee {
      0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
      }
      100% {
        -webkit-transform: translate(-50%);
        -moz-transform: translate(-50%);
        -o-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%);
      }
    }
    }
    Purtroppo non posso intervenire invece nell'HTML, che rimane così com'è perché si tratta di un'applicazione di WordPress (che dovrà gestire chi non conosce i codici). Posso quindi solo modificare il CSS.

    Ho adattato questo script, dimenticando forse qualcosa di fondamentale.

    Ringrazio infinitamente chi mi aiuterà a risolvere il problema.

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,891
    Ciao e benvenuto/a, ci sono tre principali cause che incidono sul problema:

    1 - al contenitore principale (div) deve essere applicato display:flex come per l'elemento ul;

    2 - la proprietà flex applicata agli elementi li (che qui non hai riportato ma è visibile esaminando la pagina linkata), altera il calcolo della larghezza totale di ul, compromettendo quindi l'animazione che si basa su tale larghezza. In questo caso sarebbe meglio rimuovere la proprietà flex per gli elementi li e applicare invece una width fissa (come ne codepen che hai linkato);

    3 - questo tipo di carousel, basato sul solo CSS, necessita di una duplicazione dell'intero blocco di voci, in modo che durante lo scorrimento si crei quella continuità tra l'ultima voce e la prima. In genere si dovrebbero duplicare manualmente i tag HTML, anche più volte a seconda del numero di voci e della larghezza dei vari elementi (vedi il codice HTML del codepen), così che non si vadano a creare dei vuoti dovuti all'eventuale mancanza di continuità lungo la larghezza totale.

    Quest'ultimo punto è quello focale perché tu hai escluso la possibilità di modificare il codice HTML.

    Sarebbe anche possibile usare un po' di JavaScript per duplicare automaticamente tali tag ma ritengo che forse sia più funzionale utilizzare qualche altro plugin WordPress che sia specifico per la creazione di carousel. Ne hai provato qualcuno o magari, hai provato a cercarne?
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Tutto chiaro, grazie davvero! Purtroppo dal terzo punto intuisco che sarebbe meglio cambiare script. Farò sapere come ho risolto!

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.