"Big Carousel"
Bootstrap 3.2.0 Snippet by GavinWhite

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="carousel"> <div class="carousel_item item1"><h2><i>Item 1</i></h2></div> <div class="carousel_item item2"><h2><i>Item 2</i></h2></div> <div class="carousel_item item3"><h2><i>Item 3</i></h2></div> <div id="img-container"> <img class="carousel_img cimg1 img-responsive" src="https://avatars0.githubusercontent.com/u/1748972?v=2&s=96" alt="Responsive Design" /> <iframe class="carousel_img cimg2" width="500" height="315" src="//www.youtube.com/embed/-UXy5IcJMvY" frameborder="0" allowfullscreen></iframe> <img class="carousel_img cimg3 img-responsive" src="https://avatars0.githubusercontent.com/u/1748972?v=2&s=96" alt="Responsive Design" /> </div> <a class="left carousel-control" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> <ol class="carousel-indicators"> <li class="ind1 active"></li> <li class="ind2"></li> <li class="ind3"></li> </ol> </div><br />
body{ margin: 0; padding: 0; overflow-x: hidden; } .carousel{ width: 100%; max-width: 2500px; height: 400px; margin: 50px 0 0 0; padding: 0; top: 0; left: 0; background-image: url('http://gbweb.nl/images/huge.jpg'); position: relative; background-position: 1.4s ease-in-out 0.3s; } .carousel_item{ z-index: 10; position: absolute; width: 50%; display: none; top: 80px; } .carousel_item > h2 > i{ background-color: rgba(92, 132, 56, 0.8); font-size: 36px; font-style: normal; font-family: 'Open Sans', sans-serif; padding: 0 5px; text-transform: uppercase; color: white; font-weight: normal; } .carousel_item > p > i{ font-size: 17px; font-style: normal; font-family: 'Open Sans', sans-serif; padding: 0 5px; color: white; font-weight: normal; } .carousel_item > p{ margin-top: 10px; background-color: rgba(92, 132, 56, 0.8); max-width: 50%; line-height: 115%; } .carousel_img{ position: absolute; left: 50%; z-index: 11; height: 260px; top: 80px; display: none; } .carousel_img > img{ vertical-align: middle; height: 100%; display: none; }
/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net) * Licensed under the MIT License (LICENSE.txt). */ (function($) { // backgroundPosition[X,Y] get hooks var $div = $('<div style="background-position: 3px 5px">'); $.support.backgroundPosition = $div.css('backgroundPosition') === "3px 5px" ? true : false; $.support.backgroundPositionXY = $div.css('backgroundPositionX') === "3px" ? true : false; $div = null; var xy = ["X","Y"]; // helper function to parse out the X and Y values from backgroundPosition function parseBgPos(bgPos) { var parts = bgPos.split(/\s/), values = { "X": parts[0], "Y": parts[1] }; return values; } if (!$.support.backgroundPosition && $.support.backgroundPositionXY) { $.cssHooks.backgroundPosition = { get: function( elem, computed, extra ) { return $.map(xy, function( l, i ) { return $.css(elem, "backgroundPosition" + l); }).join(" "); }, set: function( elem, value ) { $.each(xy, function( i, l ) { var values = parseBgPos(value); elem.style[ "backgroundPosition" + l ] = values[ l ]; }); } }; } if ($.support.backgroundPosition && !$.support.backgroundPositionXY) { $.each(xy, function( i, l ) { $.cssHooks[ "backgroundPosition" + l ] = { get: function( elem, computed, extra ) { var values = parseBgPos( $.css(elem, "backgroundPosition") ); return values[ l ]; }, set: function( elem, value ) { var values = parseBgPos( $.css(elem, "backgroundPosition") ), isX = l === "X"; elem.style.backgroundPosition = (isX ? value : values[ "X" ]) + " " + (isX ? values[ "Y" ] : value); } }; $.fx.step[ "backgroundPosition" + l ] = function( fx ) { $.cssHooks[ "backgroundPosition" + l ].set( fx.elem, fx.now + fx.unit ); }; }); } })(jQuery); $(document).ready(function () { var x = $('.carousel'); var y = 0; var save = ''; $('.item1').animate({left:'12%', opacity:"show"}, 600); $('.cimg1').css('left', '25%').animate({left:'50%', opacity:'show'}, 600, function() { save = $('#img-container').html(); }); var int = self.setInterval(function () { if( !x.is(':animated') ){ x.animate({backgroundPositionX: '+=50%' }, 2200); if(y == 2){ y = 0; }else{ y++; } switch(y){ case 0: $('.ind3').removeClass('active'); $('.ind1').addClass('active'); $('.cimg3').animate({left:'54%'}, 100).animate({left:'38%', opacity:"hide"}, 600); $('.item3').delay(600).animate({left:'16%'}, 100).animate({left:0, opacity:"hide"}, 600, function () { $('.cimg1').css('left', '62%').animate({left:'50%', opacity:"show"}, 800); $('.item1').css('left', '24%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; case 1: $('.ind1').removeClass('active'); $('.ind2').addClass('active'); $('.cimg1').animate({left:'64%'}, 100).animate({left:'48%', opacity:"hide"}, 600); $('.item1').delay(600).animate({left:'16%'}, 100).animate({left:0, opacity:"hide"}, 600, function () { $('.cimg2').css('left', '62%').animate({left:'50%', opacity:"show"}, 800); $('.item2').css('left', '24%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; case 2: $('.ind2').removeClass('active'); $('.ind3').addClass('active'); $('.cimg2').animate({left:'64%'}, 100).animate({left:'48%', opacity:"hide"}, 600); $('.item2').delay(600).animate({left:'16%'}, 100).animate({left:0, opacity:"hide"}, 600, function () { $('.cimg3').css('left', '62%').animate({left:'50%', opacity:"show"}, 800); $('.item3').css('left', '24%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; } } }, 9000); $('.carousel').hover(function () { window.clearInterval(int); }, function() { int = self.setInterval(function () { if( !x.is(':animated') ){ x.animate({backgroundPositionX: '+=50%' }, 2200); if(y == 2){ y = 0; }else{ y++; } switch(y){ case 0: $('.ind3').removeClass('active'); $('.ind1').addClass('active'); $('.cimg3').animate({left:'54%'}, 100).animate({left:'38%', opacity:"hide"}, 600); $('.item3').delay(600).animate({left:'16%'}, 100).animate({left:0, opacity:"hide"}, 600, function () { $('.cimg1').css('left', '62%').animate({left:'50%', opacity:"show"}, 800); $('.item1').css('left', '24%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; case 1: $('.ind1').removeClass('active'); $('.ind2').addClass('active'); $('.cimg1').animate({left:'64%'}, 100).animate({left:'48%', opacity:"hide"}, 600); $('.item1').delay(600).animate({left:'16%'}, 100).animate({left:0, opacity:"hide"}, 600, function () { $('.cimg2').css('left', '62%').animate({left:'50%', opacity:"show"}, 800); $('.item2').css('left', '24%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; case 2: $('.ind2').removeClass('active'); $('.ind3').addClass('active'); $('.cimg2').animate({left:'54%'}, 100).animate({left:'38%', opacity:"hide"}, 600); $('.item2').delay(600).animate({left:'16%'}, 100).animate({left:0, opacity:"hide"}, 600, function () { $('.cimg3').css('left', '62%').animate({left:'50%', opacity:"show"}, 800); $('.item3').css('left', '24%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; } } }, 9000); }); $('.left').click(function () { if( !x.is(':animated') ){ x.animate({backgroundPositionX: '-=50%' }, 2200); if(y == 0){ y = 2; }else{ y--; } switch(y){ case 0: $('.ind2').removeClass('active'); $('.ind1').addClass('active'); $('.cimg2').animate({left:'46%'}, 100).animate({left:'70%', opacity:"hide"}, 600); $('.item2').delay(600).animate({left:'8%'}, 100).animate({left:'24%', opacity:"hide"}, 600, function () { $('.cimg1').css('left', '38%').animate({left:'50%', opacity:"show"}, 800); $('.item1').css('left', 0).delay(300).animate({left:'12%', opacity:"show"}, 800); }); break; case 1: $('.ind3').removeClass('active'); $('.ind2').addClass('active'); $('.cimg3').animate({left:'46%'}, 100).animate({left:'70%', opacity:"hide"}, 600); $('.item3').delay(600).animate({left:'8%'}, 100).animate({left:'24%', opacity:"hide"}, 600, function () { $('.cimg2').css('left', '38%').animate({left:'50%', opacity:"show"}, 800); $('.item2').css('left', 0).delay(300).animate({left:'12%', opacity:"show"}, 800); }); break; case 2: $('.ind1').removeClass('active'); $('.ind3').addClass('active'); $('.cimg1').animate({left:'46%'}, 100).animate({left:'70%', opacity:"hide"}, 600); $('.item1').delay(600).animate({left:'8%'}, 100).animate({left:'24%', opacity:"hide"}, 600, function () { $('.cimg3').css('left', '38%').animate({left:'50%', opacity:"show"}, 800); $('.item3').css('left', 0).delay(300).animate({left:'12%', opacity:"show"}, 800); }); break; } } }); $('.right').click(function () { if( !x.is(':animated') ){ x.animate({backgroundPositionX: '+=50%' }, 2200); if(y == 2){ y = 0; }else{ y++; } switch(y){ case 0: $('.ind3').removeClass('active'); $('.ind1').addClass('active'); $('.cimg3').animate({left:'54%'}, 100).animate({left:'38%', opacity:"hide"}, 600); $('.item3').delay(600).animate({left:'16%'}, 100).animate({left:0, opacity:"hide"}, 600, function () { $('.cimg1').css('left', '62%').animate({left:'50%', opacity:"show"}, 800); $('.item1').css('left', '24%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; case 1: $('.ind1').removeClass('active'); $('.ind2').addClass('active'); $('.cimg1').animate({left:'54%'}, 100).animate({left:'38%', opacity:"hide"}, 600); $('.item1').delay(600).animate({left:'16%'}, 100).animate({left:0, opacity:"hide"}, 600, function () { $('.cimg2').css('left', '62%').animate({left:'50%', opacity:"show"}, 800); $('.item2').css('left', '24%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; case 2: $('.ind2').removeClass('active'); $('.ind3').addClass('active'); $('.cimg2').animate({left:'54%'}, 100).animate({left:'38%', opacity:"hide"}, 600); $('.item2').delay(600).animate({left:'16%'}, 100).animate({left:0, opacity:"hide"}, 600, function () { $('.cimg3').css('left', '62%').animate({left:'50%', opacity:"show"}, 800); $('.item3').css('left', '24%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; } } }); $('.ind1').click(function() { if( !x.is(':animated') ){ switch(y){ case 1: x.animate({backgroundPositionX: '-=50%' }, 2200); $('.ind2').removeClass('active'); $('.ind1').addClass('active'); $('.cimg2').animate({left:'46%'}, 100).animate({left:'62%', opacity:"hide"}, 600); $('.item2').delay(600).animate({left:'8%'}, 100).animate({left:'24%', opacity:"hide"}, 600, function () { $('.cimg1').css('left', '38%').animate({left:'50%', opacity:"show"}, 800); $('.item1').css('left', '0%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; case 2: x.animate({backgroundPositionX: '-=100%' }, 2200); $('.ind3').removeClass('active'); $('.ind1').addClass('active'); $('.cimg3').animate({left:'46%'}, 100).animate({left:'62%', opacity:"hide"}, 600); $('.item3').delay(600).animate({left:'8%'}, 100).animate({left:'24%', opacity:"hide"}, 600, function () { $('.cimg1').css('left', '38%').animate({left:'50%', opacity:"show"}, 800); $('.item1').css('left', '0%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; } y = 0; } }); $('.ind2').click(function() { if( !x.is(':animated') ){ switch(y){ case 0: x.animate({backgroundPositionX: '+=50%' }, 2200); $('.ind1').removeClass('active'); $('.ind2').addClass('active'); $('.cimg1').animate({left:'54%'}, 100).animate({left:'38%', opacity:"hide"}, 600); $('.item1').delay(600).animate({left:'16%'}, 100).animate({left:0, opacity:"hide"}, 600, function () { $('.cimg2').css('left', '62%').animate({left:'50%', opacity:"show"}, 800); $('.item2').css('left', '24%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; case 2: x.animate({backgroundPositionX: '-=50%' }, 2200); $('.ind3').removeClass('active'); $('.ind2').addClass('active'); $('.cimg3').animate({left:'46%'}, 100).animate({left:'66%', opacity:"hide"}, 600); $('.item3').delay(600).animate({left:'16%'}, 100).animate({left:0, opacity:"hide"}, 600, function () { $('.cimg2').css('left', '62%').animate({left:'50%', opacity:"show"}, 800); $('.item2').css('left', '24%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; } y = 1; } }); $('.ind3').click(function() { if( !x.is(':animated') ){ switch(y){ case 0: x.animate({backgroundPositionX: '+=100%' }, 2200); $('.ind1').removeClass('active'); $('.ind3').addClass('active'); $('.cimg1').animate({left:'54%'}, 100).animate({left:'38%', opacity:"hide"}, 600); $('.item1').delay(600).animate({left:'16%'}, 100).animate({left:0, opacity:"hide"}, 600, function () { $('.cimg3').css('left', '62%').animate({left:'50%', opacity:"show"}, 800); $('.item3').css('left', '24%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; case 1: x.animate({backgroundPositionX: '+=50%' }, 2200); $('.ind2').removeClass('active'); $('.ind3').addClass('active'); $('.cimg2').animate({left:'54%'}, 100).animate({left:'38%', opacity:"hide"}, 600); $('.item2').delay(600).animate({left:'16%'}, 100).animate({left:0, opacity:"hide"}, 600, function () { $('.cimg3').css('left', '62%').animate({left:'50%', opacity:"show"}, 800); $('.item3').css('left', '24%').delay(300).animate({left: '12%', opacity:"show"}, 800); }); break; } y = 2; } }); });

Related: See More


Questions / Comments: