Creare una slider con Bootstrap

Sempre più siti web utilizzano nella propria homepage delle immagini scorrevoli, in questo articolo andiamo a vedere come creare una slider con Bootstrap.

Se non conoscete Bootstrap vi consiglio di seguire questa guida.

Tra i tanti strumenti che Bootstrap mette a disposizione troviamo anche un carousel, ora vediamo come sfruttarlo al meglio.

Per prima cosa dobbiamo implementare il nostro sito con il Framework Bootstrap e con JQuery. Per far funzionare la nostra slider dobbiamo quindi inserire nell' head del nostro sito:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">

Ora procediamo a costruire la nostra slider:

<div id="codeplus_carousel" class="carousel slide" data-ride="carousel">
  <!-- Indicatori -->
  <ol class="carousel-indicators">
    <li data-target="#codeplus_carousel" data-slide-to="0" class="active">
    <li data-target="#codeplus_carousel" data-slide-to="1">
    <li data-target="#codeplus_carousel" data-slide-to="2">
    <li data-target="#codeplus_carousel" data-slide-to="3">
  </ol>

  <!-- Wrapper per le Slide-->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_1.jpg" alt="Uno">
    </div>

    <div class="item">
      <img src="img_2.jpg" alt="Due">
    </div>

    <div class="item">
      <img src="img_3.jpg" alt="Tre">
    </div>

    <div class="item">
      <img src="img_4.jpg" alt="Quattro">
    </div>
  </div>
</div>

Per prima cosa notiamo che abbiamo utilizzato:

• Un div con id univoco che identificherà la nostra slider, nel nostro caso #codeplus_carousel e con classe .carousel.
• La classe .slide aggiunge una transizione css durante lo scorrimento delle nuove slide.
• Nel div principale inseriamo l'attributo data-ride="carousel" .
• .carousel-indicators indicano quali sono gli indicatori della nostra slider.
• data-target deve essere uguale all'id univoco utilizzato nel div principale.
• data-slide-to indica quale slide deve comparire qundo clicchiamo quell'indicatore.
• Il div wrapper deve contenere la classe .carousel-inner
• Infine ai div che contengono le nostre immagini diamo la classe .item e la prima slide la segnaliamo come .active

Già con queste impostazioni la slider funziona, dobbiamo solo che inserire il percorso delle immagini che vogliamo utilizzare.

Se vogliamo aggiungere delle frecce per poter scorrere le nostre slide possiamo aggiungere prima della chiusura dell'ultimo div:

<!-- Frecce destra sinistra -->
  <a class="left carousel-control" href="#codeplus_carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">
    <span class="sr-only">Previous
  </a>
  <a class="right carousel-control" href="#codeplus_carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
    <span class="sr-only">Next
  </a>

Abbiamo aggiunto:

• L'attributo data-slide accetta "prev" o "next" per visualizzare la slide precedente o successiva

Se abbiamo fatto tutto nel modo corretto dovremmo ottenere qualcosa simile a:

Previous Next