Hi i using bootstrap and created bootstrap carousel but i want it move from left to the right
this is my code on jsfiddle
on this code carousel move from right to the left
var direction = type == 'next' ? 'left' : 'right'
i changed right and left in var but there is a problem. next slide come in from right again
var direction = type == 'next' ? 'right' : 'left'
I hope you understand what i want :D
EDIT:
Finally I found the answer: I edited the twitter bootstrap.css
I Xchanged all left and right in .carousel class in bootstrap.css
You can try to change in .carousel-control html code
data-slide="prev"
data-slide="next"
to
data-slide="next"
data-slide="prev"
:)
Bootstrap carousel by CSS only (right to left, RTL)
HTML:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<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>
CSS:
/* Make the images wide and responsive. */
#myCarousel img {
height: auto;
max-width: 100%;
width: 100%;
}
/* Change the order of the indicators.
Return them to the center of the slide. */
.carousel-indicators {
width: auto;
margin-left: 0;
transform: translateX(-50%);
}
.carousel-indicators li {
float: right;
margin: 1px 4px;
}
.carousel-indicators .active {
margin: 0 3px;
}
/* Change the direction of the transition. */
#media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
I also altered the .bootstrap css to achieve this effect. Instead of exchanging all lefts to rights in the css, I altered this line in the inner_carousel class:
"6s ease-in-out left;" to "6s ease-in-out right;"
Additionally, I swapped any calls of "100%" to "-100%" and "100%" to "-100%" in all child classes of the inner_carousel class.
In the Bootstrap v3.3.7 find the 'bootstrap.js' file
Now, find this code :
var delta = direction == 'prev' ? -1 : 1;
change it to :
var delta = direction == 'prev' ? 1 : -1;
Then, find these lines :
Carousel.prototype.next = function () {
if (this.sliding)
return
return this.slide('next');
}
Carousel.prototype.prev = function () {
if (this.sliding)
return
return this.slide('prev');
}
and change that to :
Carousel.prototype.next = function () {
if (this.sliding)
return
return this.slide('prev');
}
Carousel.prototype.prev = function () {
if (this.sliding)
return
return this.slide('next');
}
Related
I have a slider with slider controls left and right that are arrows and following the cursor. Those are replacing the standard nav of the revolution slider. That all looks great until I hover over a content button and then the hover function does not wor properly anymore. So I want to hide the arrows when hovering over those buttons.
I tried with CSS display:none or background:none but that didn't work:
.tp-leftarrow a:hover, .tp-rightarrow a:hover {
background: none !important;
display:none;
}
I'm sure it needs to be done with JS but my JS skills are really not up to speed currently.
CSS:
.rev_slider.interactive-arrows {cursor: none}
.rev_slider.interactive-arrows .rs-layer[data-actions] {cursor: pointer}
.rev_slider.interactive-arrows .tp-videolayer {cursor: auto}
.interactive-arrows .tparrows {
cursor: none;
visibility: hidden;
pointer-events: none;
transform: none !important;
transition: none !important;
}
.tp-leftarrow:before {
/*content: "\23" !important; */
color: #000;
content: "" !important;
background: url(/wp-content/themes/bridge/css/img/slider-left-normal.png);
color: #000;
width:60px;
height:39px;
}
.tp-rightarrow:before {
/* content: "\24" !important; */
content: "" !important;
background: url(/wp-content/themes/bridge/css/img/slider-right-normal.png);
color: #000;
width:60px;
height:39px;
/* filter: drop-shadow(0 0 5px #333); */
font-size: 66px !important;
}
JS:
(function() {
if('ontouchend' in document) return;
// ***************************************************
// replace the number "26" below with your slider's ID
var api = revapi1.addClass('interactive-arrows');
// ***************************************************
var left,
right,
prevX,
prevY,
center,
offset,
arrowW,
arrowH,
entered,
leftIsOn,
rightIsOn,
fromClick,
nextSlide,
navHovered;
api.on('revolution.slide.onloaded', function() {
left = api.find('.tp-leftarrow').off('click').css('visibility', 'visible').hide();
right = api.find('.tp-rightarrow').off('click').css('visibility', 'visible').hide();
arrowW = right.outerWidth(true) >> 1;
arrowH = right.outerHeight(true) >> 1;
api.on('mouseenter mouseleave mousemove click', function(e) {
switch(e.type) {
case 'mouseenter':
center = api.width() >> 1;
offset = api.offset();
entered = true;
updateArrows(e.pageX, e.pageY);
break;
case 'mouseleave':
entered = false;
leftIsOn = false;
rightIsOn = false;
right.hide();
left.hide();
break;
case 'mousemove':
if(!entered) api.trigger('mouseenter');
updateArrows(e.pageX, e.pageY);
break;
case 'click':
var $this = jQuery(this);
if(this.className.search(/tp-kbimg|tp-bgimg|rs-fullvideo-cover/) !== -1 ||
(this.tagName.toLowerCase() !== 'a' && !this.getAttribute('data-actions') && !$this.closest('.tp-videolayer').length)) {
fromClick = true;
api[nextSlide ? 'revnext' : 'revprev']();
}
break;
}
}).on('revolution.slide.onbeforeswap', function(e) {
if(fromClick) {
fromClick = false;
updateArrows(prevX, prevY);
}
}).find('.tp-bullets, .tp-tabs, .tp-thumbs, .rs-layer[data-actions], a.rs-layer, .tp-videolayer').on('mouseover mouseout click', function(e) {
switch(e.type) {
case 'mouseover':
navHovered = true;
right.hide();
left.hide();
break;
case 'mouseout':
navHovered = false;
updateArrows(e.pageX, e.pageY);
break;
case 'click':
e.stopPropagation();
break;
}
});
});
function updateArrows(pageX, pageY) {
if(navHovered) return;
var posX = pageX - offset.left,
posY = pageY - offset.top,
arrow;
if(posX > center) {
arrow = right.show();
nextSlide = true;
left.hide();
}
else {
arrow = left.show();
nextSlide = false;
right.hide();
}
arrow[0].style.left = (posX - arrowW) + 'px';
arrow[0].style.top = (posY - arrowH) + 'px';
prevX = pageX;
prevY = pageY;
}
})();
It is the revolution slider that does not work and I cannot figure it out why.
Thanks a lot for your help!
found this on codepen
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.cursor-icons {
display: none;
}
.carousel-control {
width: 50%;
}
.carousel .right:hover {
cursor: url("http://johnuberbacher.com/projects/codepen/arrow-right.png"), default !important
}
.carousel .left:hover {
cursor: url("http://johnuberbacher.com/projects/codepen/arrow-left.png"), default !important
}
.carousel-indicators li {
border-radius: 3px;
height: 13px;
width: 13px;
margin: 2px;
font-weight: 800;
border: 2px solid #fff;
}
.carousel-indicators .active {
height: 17px;
width: 17px;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<br>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<!-- Carousel Card -->
<div class="card card-raised card-carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item">
<img src="http://johnuberbacher.com/projects/codepen/slideshow-1.jpg">
<div class="carousel-caption">
<h4>Slideshow 1</h4>
</div>
</div>
<div class="item active">
<img src="http://johnuberbacher.com/projects/codepen/slideshow-2.jpg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Slideshow 2</h4>
</div>
</div>
<div class="item">
<img src="http://johnuberbacher.com/projects/codepen/slideshow-3.jpg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Slideshow 3</h4>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<i class="cursor-icons">keyboard_arrow_left</i>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<i class="cursor-icons">keyboard_arrow_right</i>
</a>
</div>
</div>
</div>
</div>
<!-- End Carousel Card -->
</div>
You can use JS or CSS:
document.getElementById("nocursor").style.cursor = "default"
.nocursor {
cursor: default
}
Hover Over me
Tutorial: W3Schools
I am working on angular and bootstrap application. I am implementing carousel of bootstrap in my application. Facing the width and height resized issues.
Demo link: https://plnkr.co/edit/tPKXHeN3JWyqZgOtrTTS?p=preview
When user click's on next arrow in the above link, we can see graph but the dimensions of the graph are reduced. I want all the images/graphs used to be 100% width and height.Any suggestions would be helpful.
css code:
.panel-info .panel-heading {
background-color: #c1c6dd;
}
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
.carousel-control.left, .carousel-control.right {
color: #2fa4e7;
background-image: none;
}
.carousel-control {
z-index: 10;
top: 2%;
width: 30px;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.carousel-control.left { left: -10px; }
.carousel-control.right { right: -10px; }
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
font-size: 70px;
margin-left : -17px;
margin-right : 24px
}
html code:
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div id='id1' class="item active">
<table style="width:100%;height:80%;">
<tr>
<td id="id1td" ng-controller="myController1">
<div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
</td>
</tr>
</table>
</div>
<div id='id2' class="item" ng-controller="myController2">
<table style="width:100%;height:90%;">
<tr style="height:5%;">
<td>
<h1>Title and some content goes here----</h1>
</td>
<tr style="height:85%;">
<td id="id2td">
<div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
</td>
</tr>
</table>
</div>
</div>
<!-- Left and right controls -->
<span class="left carousel-control" href="#myCarousel" data-slide="prev" >
<span class="glyphicon glyphicon-chevron-left"></span>
</span>
<span class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
</div>
there is always a problem with tabs and carousel. when you render the chart. if tabs or carousel is not active it will not render charts properly. so I have found the solution for it.
find all delete-me class in the new code it only in index.html file and remove them after page is loaded
<script type="text/javascript" charset="utf-8">
setTimeout(function() {
$('.delete-me').removeClass('active delete-me');
}, 500);
</script>
I just updated your code
DEMO here: https://plnkr.co/edit/EoOxuhH8FTPEOTg5MlHH?p=preview
I am trying to set animation to bootstrap carousel caption. But I am not getting.
Here is my code index.html
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MatajerWebSite.Index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/style.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<%--<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#mycarousel').jcarousel();
});
</script>--%>
</head>
<body>
<form id="form1" runat="server">
<div class="container main-container">
<h1>Bootstrap Carousel with Animate.css</h1>
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="item active deepskyblue">
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft">This is the caption for slide 1
</h3>
<h3 data-animation="animated bounceInRight">This is the caption for slide 1
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
</div>
</div>
<!-- /.item -->
<!-- Second slide -->
<div class="item skyblue">
<div class="carousel-caption">
<h3 class="icon-container" data-animation="animated bounceInDown">
<span class="glyphicon glyphicon-heart"></span>
</h3>
<h3 data-animation="animated bounceInUp">This is the caption for slide 2
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInRight">Button</button>
</div>
</div>
<!-- /.item -->
<!-- Third slide -->
<div class="item darkerskyblue">
<div class="carousel-caption">
<h3 class="icon-container" data-animation="animated zoomInLeft">
<span class="glyphicon glyphicon-glass"></span>
</h3>
<h3 data-animation="animated flipInX">This is the caption for slide 3
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated lightSpeedIn">Button</button>
</div>
</div>
<!-- /.item -->
</div>
<!-- /.carousel-inner -->
<!-- Controls -->
<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>
<!-- /.carousel -->
</div>
<!-- /.container -->
<p class="p">Demo by Antonietta Perna. See article.</p>
</form>
style.js
/* Demo Scripts for Bootstrap Carousel and Animate.css article
* on SitePoint by Maria Antonietta Perna
*/
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);
style.css file
.main-container {
padding: 10px 15px;
}
.skyblue {
background-color: #22c8ff;
}
.deepskyblue {
background-color: #00bfff;
}
.darkerskyblue {
background-color: #00a6dd;
}
.carousel-indicators {
bottom: 0;
}
.carousel-control.right,
.carousel-control.left {
background-image: none;
}
.carousel .item {
min-height: 350px;
height: 100%;
width:100%;
}
.carousel-caption h3,
.carousel .icon-container,
.carousel-caption button {
background-color: #09c;
}
.carousel-caption h3 {
padding: .5em;
}
.carousel .icon-container {
display: inline-block;
font-size: 25px;
line-height: 25px;
padding: 1em;
text-align: center;
border-radius: 50%;
}
.carousel-caption button {
border-color: #00bfff;
margin-top: 1em;
}
/* Animation delays */
.carousel-caption h3:first-child {
animation-delay: 1s;
}
.carousel-caption h3:nth-child(2) {
animation-delay: 2s;
}
.carousel-caption button {
animation-delay: 3s;
}
h1 {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
}
.p {
padding-top: 125px;
text-align: center;
}
.p a {
text-decoration: underline;
}
this is my complete code. I got error like below
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:1): status=2147746065 source: http://localhost:49905/fonts/glyphicons-halflings-regular.woff2
The error message gives you a fairly clear indication of the problem.
You are referencing glyphicons but the font has failed to load. Check the browser console for any other information and then correct the HTML to make sure it is loaded.
I use the following carousel slider and I want left and right image to be black & white except from centered image. I have to use the following css3: -webkit-filter: grayscale(100%); filter: grayscale(100%);
Where should I write it?
<div class="container-fluid"> <!-- "container-fluid" -->
<div class="row">
<div class="col-md-12 center-block">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="../images/01.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="../images/02.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="../images/03.jpg" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style=""><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div> <!-- row -->
</div> <!-- container fluid -->
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.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));
}
});
});
</script>
<style>
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, .carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 25%;
}
</style>
Try to add:
.item > div:first-child img,
.item > div:last-child img {
-webkit-filter: grayscale(100%); filter: grayscale(100%);
}
Test the result:
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.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));
}
});
});
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, .carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 25%;
}
.item > div:first-child img,
.item > div:last-child img {
-webkit-filter: grayscale(100%); filter: grayscale(100%);
}
<div class="container-fluid"> <!-- "container-fluid" -->
<div class="row">
<div class="col-md-12 center-block">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style=""><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div> <!-- row -->
</div> <!-- container fluid -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Image of my carousel:
Hey guys, I'm trying to get my previous/next photos in my carousel to be edge (so you can see three photos, but only half of the first and third photo) to edge with a 10px gap in between. Can't find a way to do this. I've gotten as far as setting the height of the carousel and centering the image. Now if I could just get the other images to slide up next to the displayed image!
Thank you guys!
<script>
$(document).ready(function() {
$('#carousel-example-generic').carousel({
interval: 10000
})
$('.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));
}
});
});
</script>
.carousel-inner {
height: 515px;
}
.item {
height: 515px;
}
.carousel-inner .item img {
position: relative;
top: 50%;
transform: translateY(-50%);
height: 515px;
margin: 0 auto;
}
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left,
.carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 20%;
}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets/img/carousel-1.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="assets/img/carousel-2.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="assets/img/carousel-3.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
...
</div>
<!-- Controls -->
<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>