Image slide show

Aperto da lg965, Giovedì - 14 Febbraio 2019 - 02:04

0 Utenti e 1 Visitatore stanno visualizzando questa discussione.

lg965

Ciao,dovrei fare uno slide show di immagini, come mi consigliate di procedere?

radu81

Vedo che stai già utilizzando Simple Portal, il modo più semplice è creare un blocco html con lo slide show e pubblicarlo nella home del sito. Lo avevo fatto in passato, non ho più il codice da passarti, ma facendo una ricerca su google con le parole "free html slide show" sono sicuro che troverai qualche blocco già pronto da inserire.

Il primo che ho trovato https://freefrontend.com/css-slideshows/

lg965

Grazie, in effetti è la soluzione più semplice e cercando in giro ho trovato questo:

https://www.hyde-design.co.uk/joomla-bites/80-create-a-css-slideshow-no-javascript-required

Ho inserito il css nell' head della pagina html e va alla grande!

Bisogna naturalmente inserire il corretto path delle immagini, e volendo si possono variare le dimensioni, il tempo di esposizione e il numero delle immagini.

Per futura memoria inserisco il codice:

<head>
.fling-minislide {width:350px; height:300px; overflow:hidden; position:relative; }
.fling-minislide img{ position:absolute; animation:fling-minislide 20s infinite; opacity:0; width: 100%; height: auto;}

@keyframes fling-minislide {25%{opacity:1;} 40%{opacity:0;}}
.fling-minislide img:nth-child(4){animation-delay:0s;}
.fling-minislide img:nth-child(3){animation-delay:5s;}
.fling-minislide img:nth-child(2){animation-delay:10s;}
.fling-minislide img:nth-child(1){animation-delay:15s;}
</head>
<body>
<div class="fling-minislide">
  <img src="/path-to-your-image-file-4.jpg" alt="Slide 4" />
  <img src="/path-to-your-image-file-3.jpg" alt="Slide 3" />
  <img src="/path-to-your-image-file-2.jpg" alt="Slide 2" />
  <img src="/path-to-your-image-file-1.jpg" alt="Slide 1" />
</div>
</body>


Semplice ed efficace, proprio quello che cercavo!

Discussioni simili (3)