<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;
}
});
});
