Carousel

Il carousel è un componente che consente una rotazione tra elementi (card, immagini, etc.) e conferisce dinamicità alla pagina web.
Qui potrai reperire la User Interface, lo snippet e le modalità di utilizzo per i carousel nell’Ecosistema digitale Turismo Cultura.

Carousel con hero


                                            
<div id="dms-slick-carousel-1" class="dms-carousel controller hero-slider">

    <div>

        <div class="dms-hero jumbotron jumbotron-fluid d-flex align-items-center"
            style="background-image: url(assets/img/placeholder-img.jpg);">
            <div class="container">
                <div class="dms-hero--content">
                    <h2>Lorem Ipsum</h2>
                    <p class="dms-hero--subtitle">Mollitia tempora bibendum
                        <strong>libero</strong></p>
                    <button class="btn dms-btn dms-btn--secondary"
                        type="button">Approfondisci</button>
                </div>
            </div>
        </div>

    </div>

    <div>

        <div class="dms-hero jumbotron jumbotron-fluid d-flex align-items-center"
            style="background-image: url(assets/img/placeholder-img.jpg);">
            <div class="container">
                <div class="dms-hero--content">
                    <h2>Lorem Ipsum</h2>
                    <p class="dms-hero--subtitle">Mollitia tempora bibendum
                        <strong>libero</strong></p>
                    <button class="btn dms-btn dms-btn--secondary"
                        type="button">Approfondisci</button>
                </div>
            </div>
        </div>

    </div>

    <div>

        <div class="dms-hero jumbotron jumbotron-fluid d-flex align-items-center"
            style="background-image: url(assets/img/placeholder-img.jpg);">
            <div class="container">
                <div class="dms-hero--content">
                    <h2>Lorem Ipsum</h2>
                    <p class="dms-hero--subtitle">Mollitia tempora bibendum
                        <strong>libero</strong></p>
                    <button class="btn dms-btn dms-btn--secondary"
                        type="button">Approfondisci</button>
                </div>
            </div>
        </div>

    </div>

</div>
                                            
$(document).ready(function(){
    $('#dms-slick-carousel-1').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        draggable: true,
        dots: true,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 3000,
        speed: 500,
        responsive: [{
            breakpoint: 992,
            settings: {
            arrows: false,
            }
        }]
    });
});


Carousel con card


                                            
<div id="dms-slick-carousel-2" class="dms-carousel">

    <div>
        <div class="dms-card-events card">
            <div class="card-header"
                style="background-image: url('assets/img/placeholder-img.jpg');">
                <div class="status">Open registration</div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <span class="date">29/07/2020</span>
                    <span class="status-participation success-clr--bkg"></span>
                </div>
                <h4 class="text-uppercase tr-p2">Lorem ipsum dolor sit amet, molestiae
                    appellantur</h4>
                <span><i class="dms-wk-icon-pin"> </i>Lorem Ipsum - Bari</span>
                <div class="card-body--content d-flex justify-content-between">
                    <div><i class="dms-wk-icon-buyer"> </i>Buyers: <span>25</span>
                    </div>
                    <div><i class="dms-wk-icon-seller"> </i>Sellers:
                        <span>25</span></div>
                </div>
            </div>
            <div class="card-footer">
                <a href="">setup</a>
            </div>
        </div>
    </div>

    <div>
        <div class="dms-card-events card">
            <div class="card-header"
                style="background-image: url('assets/img/placeholder-img.jpg');">
                <div class="status">Open registration</div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <span class="date">29/07/2020</span>
                    <span class="status-participation success-clr--bkg"></span>
                </div>
                <h4 class="text-uppercase tr-p2">Lorem ipsum dolor sit amet, molestiae
                    appellantur</h4>
                <span><i class="dms-wk-icon-pin"> </i>Lorem Ipsum - Bari</span>
                <div class="card-body--content d-flex justify-content-between">
                    <div><i class="dms-wk-icon-buyer"> </i>Buyers: <span>25</span>
                    </div>
                    <div><i class="dms-wk-icon-seller"> </i>Sellers:
                        <span>25</span></div>
                </div>
            </div>
            <div class="card-footer">
                <a href="">setup</a>
            </div>
        </div>
    </div>
    
    <div>
        <div class="dms-card-events card">
            <div class="card-header"
                style="background-image: url('assets/img/placeholder-img.jpg');">
                <div class="status">Open registration</div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <span class="date">29/07/2020</span>
                    <span class="status-participation success-clr--bkg"></span>
                </div>
                <h4 class="text-uppercase tr-p2">Lorem ipsum dolor sit amet, molestiae
                    appellantur</h4>
                <span><i class="dms-wk-icon-pin"> </i>Lorem Ipsum - Bari</span>
                <div class="card-body--content d-flex justify-content-between">
                    <div><i class="dms-wk-icon-buyer"> </i>Buyers: <span>25</span>
                    </div>
                    <div><i class="dms-wk-icon-seller"> </i>Sellers:
                        <span>25</span></div>
                </div>
            </div>
            <div class="card-footer">
                <a href="">setup</a>
            </div>
        </div>
    </div>
    
    <div>
        <div class="dms-card-events card">
            <div class="card-header"
                style="background-image: url('assets/img/placeholder-img.jpg');">
                <div class="status">Open registration</div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <span class="date">29/07/2020</span>
                    <span class="status-participation success-clr--bkg"></span>
                </div>
                <h4 class="text-uppercase tr-p2">Lorem ipsum dolor sit amet, molestiae
                    appellantur</h4>
                <span><i class="dms-wk-icon-pin"> </i>Lorem Ipsum - Bari</span>
                <div class="card-body--content d-flex justify-content-between">
                    <div><i class="dms-wk-icon-buyer"> </i>Buyers: <span>25</span>
                    </div>
                    <div><i class="dms-wk-icon-seller"> </i>Sellers:
                        <span>25</span></div>
                </div>
            </div>
            <div class="card-footer">
                <a href="">setup</a>
            </div>
        </div>
    </div>

</div>
                                            
$(document).ready(function(){
    $('#dms-slick-carousel-2').slick({
        arrows: true,
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 3,
        slidesToScroll: 1,
        responsive: [{
            breakpoint: 1024,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
            }
            },
            {
            breakpoint: 600,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1
            }
            },
            {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
            }
        ]
    });
});

Utilizzo

Per visualizzare un carousel è stata utilizzatat la libreria Slick (v1.8.0) che permette una vasta gamma di personalizzazioni.
Un carousel si inizializza tramite javascript mediante l'id, come si può vedere dallo snippet jQuery, ad esempio $('#dms-slick-carousel-1').slick(), personalizzando la presentazione per velocità, autoplay attivo o non attivo, numero di slide per scroll, etc. La funzione javascript è già presente all'interno del file dms-script.js che è possibile modificare e personalizzare.

Il carousel include anche il supporto per i controlli e gli indicatori precedente/successivo, oltre ai dots di indicazione posizione. Si tratta di un componente full-width che può a sua volta contentere vari tipi di componenti, solitamente card o immagini.

E' obbligatorio utilizzare:

  • la classe dms-carousel, per visualizzare correttamente il componente
  • un id differente per ogni carousel
  • il componente all'interno di un container-fluid p-0 in caso di carousel con hero
  • per il testo solo tag h2, p e p con classe dms-carousel--subtitle
  • titoli con tag che non siano h1, poichè questo può comparire al più una volta all'interno di una pagina
  • per le immagini un background-image con stile in linea per ogni slide, ad esempio style="background-image: url(assets/img/placeholder-img.jpg);"
  • i "dots" lato javascript e inserire le classi dms-carousel controller per abilitare i tasti play/pause
  • le classi dms-carousel hero-slider per una corretta formattazione in caso di carousel con hero