In questa lezione utilizzeremo Bootstrap carousel per generare uno slideshow di immagini che andremo ad inserire subito sotto il menù.

Utilizzare Bootstrap carousel

Quindi andiamo nel sito ufficiale di Bootstrap e selezioniamo il componente carousel: https://getbootstrap.com/docs/4.4/components/carousel/.

Dopo scegliamo l’animazione che ci piace e inseriamo il codice nella nostra pagina web, subito dopo la chiusura di nav.

Io ad esempio ho inserito questo codice:

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" 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 src="img/slide-1.jpg" class="d-block w-100" alt="coding" >
		</div>
		<div class="carousel-item">
			<img src="img/slide-5.jpg" class="d-block w-100" alt="fare coding">
		</div>
		<div class="carousel-item">
			<img src="img/slide-3.jpg" class="d-block w-100" alt="coding a scuola">
		</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>

Scegliete delle immagini della stessa dimensione, io ad esempio ho scelto 3 immagini di 1600*800px e le ho inserite nella cartella img.

Provate la pagina in un browser, otterrete un risultato come quello visibile in questa pagina di esempio: esempio Bootstrap Carousel.

Potete scorrere le immagini dalle frecce laterali o dalla barra in basso.

Carousel è responsive, dunque la visualizzazione delle immagini si adatta a qualsiasi dispositivo.

Allego tutto il codice che è servito per realizzare l’esempio per chi lo volesse utilizzare:

<!doctype html>
<html lang="en">
	<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>Template Bootstrap</title>
  </head>
  <body>
  <nav class="navbar navbar-expand-lg navbar-dark" style="background:#3f675e">
	<div class="container p-2">
		<a class="navbar-brand" href="#">Coding Creativo</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
	  <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
		<ul class="navbar-nav">
			<li class="nav-item active">
				<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Chi siamo</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Dove siamo</a>
			</li>
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					Link utili
				</a>
				<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
					<a class="dropdown-item" href="#">Contatti</a>
					<a class="dropdown-item" href="#">Form</a>
				</div>
			</li>
		</ul>
	 </div>
	</div>
	</nav>
	
	<div id="carouselExampleIndicators" class="carousel slide carousel-fade" 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 src="img/slide-1.jpg" class="d-block w-100" alt="coding" >
			</div>
			<div class="carousel-item">
				<img src="img/slide-5.jpg" class="d-block w-100" alt="fare coding">
			</div>
			<div class="carousel-item">
				<img src="img/slide-3.jpg" class="d-block w-100" alt="coding a scuola">
			</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>
	
	<div class="container pt-5">
		<div class="row">
			<div class="col-sm">
				<h2>HTML5<h2>
				<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
			</div>
			<div class="col-sm">
				<h2>CSS3<h2>
				<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
			</div>
			<div class="col-sm">
				<h2>Bootstrap<h2>
				<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
			</div>
		</div>
	</div>
    
	
	 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Carousel

Analizziamo adesso il codice che abbiamo utilizzato per la creazione del carousel.

L’utilizzo di carousel richiede un id per far funzionare correttamente i controlli, nel nostro esempio l’id è carouselExampleIndicators.

Nel div abbiamo anche specificato le classi:

carousel prende le specifiche dello slideshow;

slide aggiunge una transizione CSS e un effetto di animazione;

carousel-fade aggiunge un effetto a scomparsa tra un’immagine e l’altra.

Dopo il div principale abbiamo inserito un elenco ordinato con i punti elenco che rappresentano gli indicatori, ovvero i punti che si trovano nella parte inferiore di ciascuna immagine. Cliccando su questi punti è possibile scorrere le immagini.

<ol class="carousel-indicators">

A questo elenco abbiamo assegnato la classe carousel-indicator. Ogni punto elenco ha un attributo data-target che punta all’id del carousel. Possiede anche un attributo data-slice-to che specifica su quale immagine andare quando si fa clic sul punto.

Dopo si crea un livello che contiene le nostre immagini a cui si assegna la classe carousel-inner mentre al livello che contiene ciascuna immagine viene assegnata la classe carousel-item.

Per essere visibile il carousel dobbiamo aggiungere la classe active a una delle immagini.

Infine abbiamo le frecce destra e sinistra per scorrere le immagini. Si crea un collegamento ipertestuale a cui si assegna la classe carousel-control-prev per andare indietro nelle slide, e carousel-control-next per andare avanti.

Le classi carousel-control-prev-icon e carousel-control-next-icon fanno visualizzare le frecce per scorrere le immagini.

Personalizzate il vostro carousel come meglio credete, i più esperti possono intervenire anche sul foglio di stile.

Link utili

Indice argomenti tutorial Bootstrap

1 – Introduzione a Bootstrap

2 – Creazione del primo template

3 – Come inserire una Navbar

4 – Personalizzare la posizione del menù

5 – Come utilizzare il grid system

6 – Bootstrap Container

7 – Inserire lo slideshow di immagini con Carousel

8 – Come utilizzare le Bootstrap images