#carousel-text {
background: none repeat scroll 0 0 rgba(51, 51, 51, 0.7);
bottom: 0;
color: #FFFFFF;
left: 0;
line-height: normal;
padding: 10px 20px;
position: absolute;
width: 100%;
z-index: 0;
}
.thumbnails {
list-style: none outside none;
margin: 0;
padding: 0;
}
.thumbnails > li{ display:inline}
/* Removes the default 20px margin and creates some padding space for the indicators and controls */
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
/* Reposition the controls slightly */
.carousel-control {
left: -12px;
}
.carousel-control.right {
right: -12px;
}
/* Changes the position of the indicators */
.carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the colour of the indicators */
.carousel-indicators li {
background: #c0c0c0;
}
.carousel-indicators .active {
background: #333333;
}
$(document).ready(function() {
$('#myCarousel').carousel({
interval: 10000
})
});
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
