/*This is just style for my particular carousel. Change this to fit your project.*/
.carousel {
max-width: 800px;
height: auto;
margin: 0 auto;
}
/*These are the core functionality styles. Keep these until you understand how to modify*/
/*.carousel-inner .active .carousel-control-prev {*/
/* left: -33%;*/
/*}*/
/*.carousel-inner .carousel-control-next {*/
/* left: 33%; */
/*}*/
/*.carousel-inner .carousel-control-prev {*/
/* left: -33%;*/
/*}*/
/*.carousel-control-prev,*/
/*.carousel-control-next {*/
/* background-image:none;*/
/*}*/
/*.carousel-item:not(.prev) {*/
/* visibility: visible;*/
/*}*/
/*.carousel-item.carousel-control-next:not(.prev) {*/
/* visibility: hidden;*/
/*}*/
/*.rightest{ */
/* visibility: visible;*/
/*}*/
/*Take 2*/
.carousel-inner > .carousel-item {
-webkit-transition: 500ms ease-in-out left;
transition: 500ms ease-in-out left;
}
.carousel-inner .active.left {
left: -33%;
}
.carousel-inner .active.right {
left: 33%;
}
.carousel-inner .next {
left: 33%;
}
.carousel-inner .prev {
left: -33%;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .carousel-item {
-webkit-transition: 500ms ease-in-out left;
transition: 500ms ease-in-out left;
-webkit-transition: 500ms ease-in-out all;
transition: 500ms ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-transform: none!important;
transform: none!important;
}
}
// $('#myCarousel').carousel({
// interval: 40000
// });
// $('.carousel .carousel-item').each(function(){
// var next = $(this).next();
// if (!next.length) {
// next = $(this).siblings(':first');
// }
// next.children(':first-child').clone().appendTo($(this));
// if (next.next().length>0) {
// next.next().children(':first-child').clone().appendTo($(this)).addClass('rightest');
// }
// else {
// $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
// }
// });
//Take 2
// Instantiate the Bootstrap carousel
$('#myCarousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.carousel .carousel-item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});