Bootstrap carousel

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

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *