Beh, la risposta è semplice. Ti basterà copiare il codice che troverai sotto la slideshow, incollarlo in un tuo articolo e cambiare i percorsi, i titoli e le descrizioni delle immagini.
Dovrai però usare il template di default Protostar, o altro che utilizzi lo stesso framework, il bootstrap, che è integrato in Joomla 3.
Io trovo davvero interessanti queste caratteristiche perchè ci permettono di realizzare un bel sito web senza bisogno di installare altre estesnioni, il che vuol dire maggior velocità e. soprattutto, maggior sicurezza.
Gustiamoci adesso queste belle immagini. Volutamente hanno altezza diversa perchè volevo testare il comportamento della slideshow. Esame passato, direi!
Ecco qui il codice utilizzato per questa slideshow:
<div id="mySlide" class="carousel slide"> <div class="carousel-inner"> <div class="item active"><img src="/joomla35/images/slide/01.jpg" /> <div class="carousel-caption"> <h4>Fagiano</h4> <p>Descrizione prima immagine....</p> </div> </div> <div class="item"><img src="/joomla35/images/slide/02.jpg" /> <div class="carousel-caption"> <h4>Farfalla</h4> <p>Descrizione seconda immagine...</p> </div> </div> <div class="item"><img src="/joomla35/images/slide/03.jpg" /> <div class="carousel-caption"> <h4>Cigni</h4> <p>Descrizione terza immagine...</p> </div> </div> <div class="item"><img src="/joomla35/images/slide/04.jpg" /> <div class="carousel-caption"> <h4>Ancora farfalle</h4> <p>Descrizione quarta immagine...</p> </div> </div> <div class="item"><img src="/joomla35/images/slide/05.jpg" /> <div class="carousel-caption"> <h4>Pesce</h4> <p>Descrizione quinta immagine...</p> </div> </div> <div class="item"><img src="/joomla35/images/slide/06.jpg" /> <div class="carousel-caption"> <h4>Farfalla e scorpione</h4> <p>Descrizione sesta immagine...</p> </div> </div> <div class="item"><img src="/joomla35/images/slide/07.jpg" /> <div class="carousel-caption"> <h4>Pappagallo</h4> <p>Descrizione settima immagine...</p> </div> </div> </div> <a class="left carousel-control" href="#mySlide" data-slide="prev">‹</a> <a class="right carousel-control" href="#mySlide" data-slide="next">›</a></div>