Unito.it

Tema Unito v 3 / 3.1

Slider

Un componente di presentazione a scorrimento per immagini o diapositive di testo.

Come funziona

Il componente presente nella versione precedente del tema utilizzava un plugin jQuery di terze parti (Owl Slider), ora dismesso.
La versione attuale del tema offre un'alternativa al componente che non fa uso di librerie javascript esterne quali jQuery.

Per utilizzarlo occorre sia presente in pagina il relativo codice javascript da collocare a fine pagina, immediatamente prima del tag di chiusura </body> così come il file css specifico, da collocare all'interno del tag <head>

Versione 3
<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v3/css/slider.min.css">
<script src="https://cdn.unito.it/unito-theme/v3/js/slider.min.js" crossorigin="anonymous"></script>
Versione 3.1
<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v3-1/css/slider.min.css">
<script src="https://cdn.unito.it/unito-theme/v3-1/js/slider.min.js" crossorigin="anonymous"></script>

Versione base

Solo Versione 3
<div class="row">
    <div class="container">
        <section class="carousel" id="my-carousel" aria-labelledby="carouselheading">
            <h3 id="carouselheading" class="visually-hidden">In Evidenza</h3>
            <ul>
                <li class="slide" style="background-image: url('https://tema.unito.it/v3/assets/images/erasmus.jpg');">
                    <article>
                        <p class="carouselItem-category">IN EVIDENZA</p>
                        <h4 class="carouselItem-title"><a href="#">Iscrizioni entro il 3 maggio</a></h4>
                        <p class="carouselItem-description"><a href="#">Iscrizioni entro il 3 maggio</a></p>
                    </article>
                </li>
                <li class="slide" style="background-image: url('https://tema.unito.it/v3/assets/images/campus.jpg');">
                    <article>
                        <p class="carouselItem-category">IN EVIDENZA</p>
                        <h4 class="carouselItem-title"><a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</a></h4>
                        <p class="carouselItem-description"><a href="#">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</a></p>
                    </article>
                </li>
                <li class="slide" style="background-image: url('https://tema.unito.it/v3/assets/images/mountains.jpg');">
                    <article>
                        <p class="carouselItem-category">IN EVIDENZA</p>
                        <h4 class="carouselItem-title"><a href="#">Quis nostrud exercitation ullamco laboris nisi</a></h4>
                        <p class="carouselItem-description"><a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</a></p>
                    </article>
                </li>
            </ul>
        </section>
    </div>
</div>

Versione alternativa - Solo Versione 3.1

ultimo aggiornamento 10/10/24

Questa versione dello slider è caratterizzata dalla presenza, nel container principale, della classe .carousel-alt

<div class="container carousel-alt">
            <section class="carousel" id="my-carousel2" aria-labelledby="carouselheading">
                <h3 id="carouselheading" class="visually-hidden">In Evidenza</h3>
                <ul>
                    <li class="slide" style="background-image: url('https://tema.unito.it/v3/assets/images/mountains.jpg');">
                        <article>
                            <p class="carouselItem-category">IN EVIDENZA</p>
                            <h4 class="carouselItem-title">Iscrizioni entro il 3 maggio</h4>
                            <p class="carouselItem-description">Iscrizioni entro il 3 maggio</p>
                            <div>
                            <a class="btn btn-primary" href="#" role="button" data-focus-mouse="false">
                                <div class="d-flex w-100 h-100 align-items-center">Leggi tutto
                                    <svg role="img" aria-labelledby="button_tit1" class="icon icon-xs ml-2">
                                        <title id="button_tit1">Titolo</title>
                                        <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                                    </svg>
                                </div>
                            </a>
                            </div>
                        </article>
                    </li>
                    <li class="slide" style="background-image: url('https://tema.unito.it/v3/assets/images/campus.jpg');">
                        <article>
                            <p class="carouselItem-category">IN EVIDENZA</p>
                            <h4 class="carouselItem-title">Compila il piano carriera</h4>
                            <p class="carouselItem-description">La scelta del tipo di impegno scade il 31 gennaio2024.<br>La scelta del tipo di impegno scade il 31 gennaio2024.<br></p>
                            <div>
                            <a class="btn btn-primary" href="#" role="button" data-focus-mouse="false">
                                <div class="d-flex w-100 h-100 align-items-center">Leggi tutto
                                    <svg role="img" aria-labelledby="button_tit2" class="icon icon-xs ml-2">
                                        <title id="button_tit2">Titolo</title>
                                        <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
                                    </svg>
                                </div>
                            </a>
                            </div>
                        </article>
                    </li>
                </ul>
            </section>
        </div>

Slider immagini - Solo Versione 3.1

ultimo aggiornamento 18/10/24

Questa variante della slider, caratterizzata dalla classe .carousel-immagini associata alla classe .carousel è dedicata alla visualizzazione di immagini

<div class="row col-12 col-lg-6">
    <div class="container carousel-immagini p-0">
        <section class="carousel" id="my-carousel-img" aria-labelledby="carouselheading">
            <h3 id="carouselheading" class="visually-hidden">In Evidenza</h3>
            <ul>
                <li class="slide">
                    <div class="w-100 h-100" style="background-image: url('https://tema.unito.it/v3/assets/images/carousel_1.jpg');"></div>
                </li>
                <li class="slide">
                    <div class="w-100 h-100" style="background-image: url('https://tema.unito.it/v3/assets/images/carousel_2.jpg');"></div>
                </li>
            </ul>
        </section>
    </div>
</div>

Slider immagini con didascalia - Solo Versione 3.1

ultimo aggiornamento 21/10/24

Se viene utilizzata la classe .carousel-didascalia assieme alla classe .carousel-immagini la slider non visualizza gli indicatori a piede della slider, anche se questi sono attivati nelle opzioni di inizializzazione della slider; al loro posto vengono visualizzate le didascalie delle immagini presenti all'interno del tag article

<div class="row col-12 col-lg-6">
    <div class="container carousel-immagini carousel-didascalia p-0">
        <section class="carousel" id="my-carousel-dida" aria-labelledby="carouselheadingd">
            <h3 id="carouselheadingd" class="visually-hidden">In Evidenza</h3>
            <ul>
                <li class="slide">
                    <div class="w-100 h-100" style="background-image: url('https://tema.unito.it/v3/assets/images/carousel_1.jpg');"></div>
                    <article>Lorem ipsum sic gloria emet</article>
                </li>
                <li class="slide">
                    <div class="w-100 h-100" style="background-image: url('https://tema.unito.it/v3/assets/images/carousel_2.jpg');"></div>
                    <article>Excepturi reprehenderit deleniti aut inventore eius nam</article>
                </li>
            </ul>
        </section>
    </div>
</div>

Slider immagini con thumbnails - Solo Versione 3.1

ultimo aggiornamento 22/10/24

Questa variante della slider, caratterizzata dalla classe .carousel-thumbs associata alla classe .carousel-immagini prevede la presenza di thumbnails a piede della slider, descrizioni delle immagini e link per il loro download. Le singole immagini della slider utilizzano un markup analogo a quello delle figure con copyright.

<div class="row col-12 col-lg-6">
    <div class="container carousel-immagini carousel-thumbs p-0">
        <section class="carousel" id="my-carousel-th" aria-labelledby="carouselheadingd">
            <h3 id="carouselheadingd" class="visually-hidden">In Evidenza</h3>
            <ul>
                <li class="slide">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/carousel_square_1.jpg" class="figure-img img-fluid rounded" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                    <div class="image-info">
                        <div class="col-12 col-md-6 text-center text-md-left"><strong>Lorem ipsum:</strong> lorem ipsum sic gloria emet</div>
                        <div class="col-12 col-md-6 text-center text-md-right">
                            <a href="#" class="ml-1" title="Scarica l'originale">Scarica originale<svg role="img" class="icon icon-xs ml-1">
                                <use xlink:href="./dist/svg/sprite.svg#it-download"></use></svg></a>
                        </div>
                    </div>
                </li>
                <li class="slide">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/carousel_square_2.jpg" class="figure-img img-fluid rounded" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                    <div class="image-info">
                        <div class="col-12 col-md-6 text-center text-md-left"><strong>Lorem ipsum:</strong> emeritur laurus titem</div>
                        <div class="col-12 col-md-6 text-center text-md-right">
                            <a href="#" class="ml-1" title="Scarica l'originale">Scarica originale<svg role="img" class="icon icon-xs ml-1">
                                            <use xlink:href="./dist/svg/sprite.svg#it-download"></use></svg></a>
                        
                        </div>
                    </div>
                </li>
                <li class="slide">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/carousel_square_1.jpg" class="figure-img img-fluid rounded" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                                <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                    <div class="image-info">
                        <div class="col-12 col-md-6 text-center text-md-left"><strong>Lorem ipsum:</strong> emeritur laurus titem</div>
                        <div class="col-12 col-md-6 text-center text-md-right">
                            <a href="#" class="ml-1" title="Scarica l'originale">Scarica originale<svg role="img" class="icon icon-xs ml-1">
                                            <use xlink:href="./dist/svg/sprite.svg#it-download"></use></svg></a>
                        </div>
                    </div>
                </li>
                <li class="slide">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/carousel_square_2.jpg" class="figure-img img-fluid rounded" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                    <div class="image-info">
                        <div class="col-12 col-md-6 text-center text-md-left"><strong>Lorem ipsum:</strong> emeritur laurus titem</div>
                        <div class="col-12 col-md-6 text-center text-md-right">
                            <a href="#" class="ml-1" title="Scarica l'originale">Scarica originale<svg role="img" class="icon icon-xs ml-1">
                                            <use xlink:href="./dist/svg/sprite.svg#it-download"></use></svg></a>
                        </div>
                    </div>
                </li>
                <li class="slide">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/carousel_square_1.jpg" class="figure-img img-fluid rounded" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                         </div>
                    </figure>
                    <div class="image-info">
                        <div class="col-12 col-md-6 text-center text-md-left"><strong>Lorem ipsum:</strong> emeritur laurus titem</div>
                        <div class="col-12 col-md-6 text-center text-md-right">
                            <a href="#" class="ml-1" title="Scarica l'originale">Scarica originale<svg role="img" class="icon icon-xs ml-1">
                                            <use xlink:href="./dist/svg/sprite.svg#it-download"></use></svg></a>
                        </div>
                    </div>
                </li>
                <li class="slide">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/carousel_square_2.jpg" class="figure-img img-fluid rounded" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                    <div class="image-info">
                        <div class="col-12 col-md-6 text-center text-md-left"><strong>Lorem ipsum:</strong> emeritur laurus titem</div>
                        <div class="col-12 col-md-6 text-center text-md-right">
                            <a href="#" class="ml-1" title="Scarica l'originale">Scarica originale<svg role="img" class="icon icon-xs ml-1">
                                            <use xlink:href="./dist/svg/sprite.svg#it-download"></use></svg></a>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
    </div>
</div>

Inizializzazione e opzioni

Il componente slider deve essere inizializzato via Javascript al caricamento della pagina, indicando nel codice la ID dell'elemento e le sue opzioni di inizializzazione, ad esempio:

<script>
    window.addEventListener('load', function () {
        var carousel = new myCarousel();
        carousel.init({
            id: 'my-carousel',
            slidenav: true,
            animate: true,
            startAnimated: true,
            interval: 4000
        });
    }, false);
</script>

Il componente può essere inizializzato con funzionalità diverse, a seconda delle sue opzioni; si tenga conto che indipendentemente dalla configurazione l'animazione delle slide viene messa in pausa al passaggio del mouse sulla singola slide.

Opzione Descrizione Richiesto Default
slidenav
booleana		 Se true, vengono visualizzati gli indicatori di avanzamento / link per le singole slide. no false
animate
booleana		 Se true, abilita le funzionalità di animazione play/stop della slide no false
startAnimated
booleana		 Se true, l'animazione delle slide parte immediatamente.
In caso contrario, è necessario premere play per far partire l'animazione.
Non ha effetto se animate==false.		 no true
interval
intero		 Intervallo di scorrimento delle slide quando animate.
In millisecondi. Non ha effetto se animate==false.		 no 5000
Torna su