Carousel bootstrap con thumbnail

carousel bootstrap con thumbnail

Dopo aver visto come creare un carousel verticale con bootstrap oggi vediamo con bootstrap come creare un carousel con thumbnail.
Le thumbnail sono delle semplici miniature, che in questo caso ci serviranno come anteprima dell’immagine del carousel. Faremo in modo che cliccando su una miniatura, ci verrà mostrata direttamente nel carousel l’immagine che abbiamo cliccato, senza dover scorrere tutte le immagini del carousel.

Come già spiegato in qualche articolo precedente, la prima cosa da fare è quella di scaricare bootstrap dal proprio sito ufficiale. Includiamo adesso i file bootstrap.min.css, presente nella cartella css e il file bootstrap.min.js presente nella cartella js e come sempre la libreria js. Quindi nel tag head ci sarà:

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Fatto questo non ci resta che creare il carousel bootstrap con thumbnail.

Iniziamo con il codice HTML:

<div class="container">
  	<!-- thumb navigation carousel -->
    <div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs">
        
            <!-- thumb navigation carousel items -->
          <ul class="list-inline">
          <li> <a id="carousel-selector-0" class="selected">
            <img src="img1.jpg" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-1">
            <img src="img2.jpg" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-2">
            <img src="img3.jpg" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-3">
            <img src="img4.jpg" class="img-responsive">
          </a></li>
                <li> <a id="carousel-selector-4">
            <img src="img5.jpg" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-5">
            <img src="img6.jpg" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-6">
            <img src="img7.jpg" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-7">
            <img src="img8.jpg" class="img-responsive">
          </a></li>
            </ul>
        
    </div>
  
    <!-- main slider carousel -->
    <div class="row">
        <div class="col-md-12" id="slider">
                <div class="col-md-12" id="carousel-bounding-box">
                    <div id="myCarousel" class="carousel slide">
                        <!-- main slider carousel items -->
                        <div class="carousel-inner">
                            <div class="active item" data-slide-number="0">
                                <img src="img-large1.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="1">
                              <img src="img-large2.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="2">
                                <img src="img-large3.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="3">
                                <img src="img-large4.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="4">
                                <img src="img-large5.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="5">
                                <img src="img-large6.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="6">
                                <img src="img-large7.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="7">
                                <img src="img-large8.jpg" class="img-responsive">
                            </div>
                        </div>
                        <!-- main slider carousel nav controls --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>

                        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
                    </div>
                </div>

        </div>
    </div>
    <!--/main slider carousel-->

</div>

L’unico stile diverso che ho dato al carousel bootstrap con thumbnail rispetto a quello del carousel bootstrap di default è quello di dare un’opacità alla thumbnail selezionata. Di seguito la regola css:

.selected img {
	opacity:0.5;
}

Una volta associato anche lo stile, non ci resta che dare vita al nostro carousel bootstrap con thumbnail.

Di seguito trovate lo script js per il funzionamento del carousel.

$('#myCarousel').carousel({
    interval: 4000
});

// click su thumbnail
$('[id^=carousel-selector-]').click( function(){
  var id_selector = $(this).attr("id");
  var id = id_selector.substr(id_selector.length -1);
  id = parseInt(id);
  $('#myCarousel').carousel(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $(this).addClass('selected');
});

// quando la slide cambia automaticamente
$('#myCarousel').on('slid', function (e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id=carousel-selector-'+id+']').addClass('selected');
});

Con questo script, le slide del carousel cambiano ogni 4 secondi automaticamente, se volete disattivare questa opzione, vi basta mettere “false” al posto di “4000” al parametro “interval”.

Lascia un commento

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