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
29/07/2020
Lorem ipsum dolor sit amet, molestiae appellantur
Piazzale Aldo Moro, 5 - Bari
29/07/2020
Lorem ipsum dolor sit amet, molestiae appellantur
Piazzale Aldo Moro, 5 - Bari
29/07/2020
Lorem ipsum dolor sit amet, molestiae appellantur
Piazzale Aldo Moro, 5 - Bari
29/07/2020
Lorem ipsum dolor sit amet, molestiae appellantur
Piazzale Aldo Moro, 5 - Bari
<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