Etags Desarrollos




owl carousel con Thumbnails

Category : Development / Programación · No Comments · by Mar 2nd, 2016

Hola, en esta ocasión me gustaría compartir un pequeño código para agregar las imégenes pequeñas al completo carrusel para jquery OWL. Lo hice para la versión más antigua pero no creo que sea complicado aplicarlo a la nueva.
Ver. http://owlgraphic.com/owlcarousel/

Esto no es algo hecho 100% por mi sino que hay códigos similares en la web , sólo que con el que detallo logré hacerlo funcionar fácilente.

<div class="slide-cont">
<div class="owl-carousel">
<div class="item"><a href="images/listing/slideer01.jpg">
<img class="img-responsive" src="images/listing/slideer01.jpg" alt="img" />
</a></div>
<div class="item"><a href="images/listing/slideer02.jpg">
<img class="img-responsive" src="images/listing/slideer02.jpg" alt="img" />
</a></div>
<div class="item"><a href="images/listing/slideer03.jpg">
<img class="img-responsive" src="images/listing/slideer03.jpg" alt="img" />
</a></div>
<div class="item"><a href="images/listing/slideer04.jpg">
<img class="img-responsive" src="images/listing/slideer04.jpg" alt="img" />
</a></div>
<div class="item"><a href="images/listing/slideer05.jpg">
<img class="img-responsive" src="images/listing/slideer05.jpg" alt="img" />
</a></div>
</div>
</div>

Y el Javascript utilizado es:

<script>
    $(document).ready(function() {    
      $(".owl-carousel").owlCarousel({
          navigation : false, // Show next and prev buttons
          slideSpeed : 300,
          paginationSpeed : 400,
          autoHeight:true,
          //Pagination
    	  pagination : true,
    	  paginationNumbers: true,
          singleItem:true,
          afterInit: function(e){
          		add_thumbs_image();
          },
          afterUpdate:function(e){
          		add_thumbs_image();
          }
      });
     
    });
    $(document).ready(function () {
	   
	});

    function add_thumbs_image(){
    	dotcount = 1;
	    $('.owl-numbers').each(function () {
	        $(this).addClass('dotnumber' + dotcount);
	        $(this).attr('data-info', dotcount);
	        dotcount = dotcount + 1;
	    });
	    slidecount = 1;
	    $('.owl-item').not('.cloned').each(function () {
	        $(this).addClass('slidenumber' + slidecount);
	        slidecount = slidecount + 1;
	    });
	    $('.owl-numbers').each(function () {
	        grab = $(this).data('info');
	        slidegrab = $('.slidenumber' + grab + ' img').attr('src');
	        console.log(slidegrab);
	        $(this).css('background-image', 'url(' + slidegrab + ')');
	    });
    }
</script>

Por último aqui algunas modificaciones para que se acomode con CSS

.slide-cont {width: 100%; display: block; margin: 0 auto;}
.owl-pagination{
	display: block;
	width: 100%;
}
.owl-theme .owl-controls .owl-page {
    display: inline-block;
}
.owl-page{
	width: 18%;
	margin:1%;
	display: inline-block;
	border: 1px solid #E2E2E2;
}
.owl-numbers{
	width: 100%;
	height: 80px;
	display: block;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	text-indent: -9999px;
}

Espero que les sirva.