Unito.it

Tema Unito v3

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> 

<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>

Esempio

<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>

Inizializzazione e opzioni

Il componente 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