The Carousel

The Code

html

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="">
        <a class="carousel-link" tile="01" href="01.jpg"></a>
      </li>
      <li data-target="#carousel-example-generic" data-slide-to="1" class="">
        <a class="carousel-link" tile="02" href="02.jpg"></a>
      </li>
      <li data-target="#carousel-example-generic" data-slide-to="2" class="">
        <a class="carousel-link" tile="03" href="03.jpg"></a>
      </li>
      <li data-target="#carousel-example-generic" data-slide-to="3" class="">
        <a class="carousel-link" tile="04" href="04.jpg"></a>
      </li>
      <li data-target="#carousel-example-generic" data-slide-to="4" class="active">
        <a class="carousel-link" tile="05" href="05.jpg"></a>
      </li>
      <li data-target="#carousel-example-generic" data-slide-to="5">
        <a class="carousel-link" tile="06" href="06.jpg"></a>
      </li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item">
          <img data-carousel-src="01.jpg" alt="Foto 01" src="01.jpg" data-holder-rendered="true">
          <div class="carousel-caption">
            <h3>First slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <a class="btn btn-primary" href="#">Link</a>
          </div>
        </div>
        <div class="item">
          <img class="carousel-images" data-carousel-src="02.jpg" src="transparent.gif" alt="Foto 02">
          <div class="carousel-caption">
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <a class="btn btn-primary" href="#">Link</a>
          </div>
        </div>
        <div class="item">
          <img class="carousel-images" data-carousel-src="03.jpg" src="transparent.gif" alt="Foto 03">
          <div class="carousel-caption">
            <h3>Third slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <a class="btn btn-primary" href="#">Link</a>
          </div>
        </div>
        <div class="item">
          <img class="carousel-images" data-carousel-src="04.jpg" src="transparent.gif" alt="Foto 04">
          <div class="carousel-caption">
            <h3>Fourth slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <a class="btn btn-primary" href="#">Link</a>
          </div>
        </div>
        <div class="item active">
          <img class="carousel-images" data-carousel-src="05.jpg" src="transparent.gif" alt="Foto 05">
          <div class="carousel-caption">
            <h3>Fifth slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <a class="btn btn-primary" href="#">Link</a>
          </div>
        </div>
        <div class="item">
          <img class="carousel-images" data-carousel-src="06.jpg" src="transparent.gif" alt="Foto 06">
          <div class="carousel-caption">
            <h3>Sixth slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <a class="btn btn-primary" href="#">Link</a>
          </div>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div>

scripts

//Bootstrap Carousel
$('.carousel').carousel();
$('#carousel-example-generic').on('slide.bs.carousel', function (e) {
	if($(e.relatedTarget).find('img.carousel-images').attr('data-carousel-src') != ''){
		var slideTo = $(e.relatedTarget).find('img.carousel-images').attr('data-carousel-src');
		$(e.relatedTarget).find('img.carousel-images').attr('src',slideTo).on('load',function(){
			$(this).fadeIn().attr('data-carousel-src',"");
		});
	}
});

//After page loading, load the rest of the pages
function carouselLoad() {
	var imgDefer = $('#carousel-example-generic .carousel-images');
	imgDefer.each(function(){
		if($(this).attr('data-carousel-src') != ''){
			$(this).attr('src',$(this).attr('data-carousel-src'));
		};
	});
}

$(window).bind("load", function() {
	carouselLoad();
});