Slider
Un componente di presentazione a scorrimento per immagini o diapositive di testo.
Come funziona
Lo slider è una presentazione per scorrere una serie di contenuti, costruito con trasformazioni CSS 3D e un pò di JavaScript. Funziona con una serie di immagini, testo o codice personalizzato. Include anche il supporto per i controlli e gli indicatori precedente/successivo ed i dots di indicazione posizione.
Il plugin utilizzato è Owl Slider.
Lo slider può contenere vari tipi di componenti, solitamente cards o immagini.
Fullscreen di immagini
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://animals.sandiegozoo.org/sites/default/files/2016-09/animals_hero_antelope.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://animals.sandiegozoo.org/sites/default/files/2016-10/animals_hero_dolphins.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Fullscreen di immagini con caption
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Titolo Caption</h5>
<p><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://animals.sandiegozoo.org/sites/default/files/2016-09/animals_hero_antelope.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Titolo Caption 2</h5>
<p><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://animals.sandiegozoo.org/sites/default/files/2016-10/animals_hero_dolphins.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Titolo Caption 3</h5>
<p><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>