Carousel CSS only

[FataTurchina82]

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:

/* 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.

[KillerWorm]

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?

[FataTurchina82]

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