getting previous and next photos to show up in bootstrap carousel - javascript

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>

Related

Carousel title disappears

I'm really new to bootstrap and web development overall and I don't know what to do. I have made a carousel for the website we had to make for our computer science class, but then I added the title and now, when I shrink the site to mobile size, the title just disappears. Here is my carousel HTML:
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-prev"></div>
<div class="carousel-next"></div>
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="christmas.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="christmas2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="christmas3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div class="carousel-caption d-none d-md-block">
<h5 class="myText">Our shop</h5>
<p>Browse our catalog and discover great discounts</p>
</div>
</div>
This is my CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.carousel-image {
height: 100vh;
}
.full-screen {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.z-index-1 {
z-index: 1;
}
.z-index-2 {
z-index: 2;
position: absolute;
width: 100%
}
.myText {
font-size: 70px;
-webkit-text-stroke: 4px red;
}
.controls {
margin-top: 0%;
}
.myHR {
border-width: 4px;
border-color: white;
margin-left: 30%;
margin-right: 30%;
}
.carousel-paragraph {
font-size: 25px;
}
.carousel-caption {
top: 40%;
position: absolute;
}
And this is my javascript:
var $item = $('.carousel-item');
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
$('.carousel').carousel({
interval: 6000,
pause: "false"
});

Never mind, I just removed the d-none class from my title division. It seems to work for me.
<div class="carousel-caption d-md-block">
<h5 class="myText">Our shop</h5>
<p>Browse our catalog and discover great discounts</p>
</div>

Change Bootstrap Carousel Animation Duration Using Cubic Bizer

Hello People I Work On Change Bootstrap Slides Animation Direction and I Tried To Change My Bootstrap Carousel Slides Animation But There Are Some Problems:
#media all and (transform-3d),
(-webkit-transform-3d) {
#my-carousel > .carousel-inner > .item {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
#my-carousel > .carousel-inner > .item.next,
#my-carousel > .carousel-inner > .item.active.right {
top: 0;
left: auto;
/*default Of Bootstrap Left: 0*/
transform: translate3d(0, 100%, 0);
}
#my-carousel > .carousel-inner > .item.prev,
#my-carousel > .carousel-inner > .item.active.left {
top: 0;
transform: translate3d(0, -100%, 0);
}
#my-carousel > .carousel-inner > .item.next.left,
#my-carousel > .carousel-inner > .item.prev.right,
#my-carousel > .carousel-inner > .item.active {
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#my-carousel > .carousel-inner > .active {
top: 0;
}
#my-carousel > .carousel-inner > .next,
#my-carousel > .carousel-inner > .prev {
top: 0;
width: auto;
height: 100%;
}
#my-carousel > .carousel-inner > .next {
left: 0;
top: 100%;
}
#my-carousel > .carousel-inner > .prev {
left: 0;
top: -100%
}
#my-carousel > .carousel-inner > .next.left,
#my-carousel > .carousel-inner > .prev.right {
top: 0;
}
#my-carousel > .carousel-inner > .active.left {
left: 0;
top: -100%;
}
#my-carousel > .carousel-inner > .active.right {
left: 0;
top: 100%;
}
/*Animation Cubic Bizer*/
#my-carousel .carousel-inner > .item {
transition-timing-function: cubic-bezier(.24,1.01,.3,.53);
transition: 4s ease-in-out top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div class="item">
<img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-carousel" 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="#my-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Note: Please Run Code Snippet In Full Screen

You just need to remove this code:
transition: 4s ease-in-out top;
and make item like this:
#my-carousel .carousel-inner > .item {
transition-timing-function: cubic-bezier(.23,1,.32,1);
transition: 4s ease-in-out top;
}
Also you need to change carousel.Constructor.TRANSITION_DURATION:
First you must get data-duration value using jQuery data() function:
var itemDurVal = $(".carousel").data("duration");
/*get data-duration value of my carousel */
Then you can change slides animation:
That synchronize transition and prevent slide to disappear before transition ends.
$.fn.carousel.Constructor.TRANSITION_DURATION = itemDurVal;
And .item transition-duration value must equal carousel.Constructor.TRANSITION_DURATION value:
$(".carousel-inner .item").css({
'-webkit-transition-duration': itemDurVal + 'ms',
'-moz-transition-duration': itemDurVal + 'ms',
'transition-duration': itemDurVal + 'ms'
});
Full code is here:
var itemDurVal = $(".carousel").data("duration"); /*get data-duration value of my carousel */
$.fn.carousel.Constructor.TRANSITION_DURATION = itemDurVal;
$(".carousel-inner .item").css({
'-webkit-transition-duration': itemDurVal + 'ms',
'-moz-transition-duration': itemDurVal + 'ms',
'transition-duration': itemDurVal + 'ms'
});
#media all and (transform-3d),
(-webkit-transform-3d) {
#my-carousel > .carousel-inner > .item {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
#my-carousel > .carousel-inner > .item.next,
#my-carousel > .carousel-inner > .item.active.right {
top: 0;
left: auto;
/*default Of Bootstrap Left: 0*/
transform: translate3d(0, 100%, 0);
}
#my-carousel > .carousel-inner > .item.prev,
#my-carousel > .carousel-inner > .item.active.left {
top: 0;
transform: translate3d(0, -100%, 0);
}
#my-carousel > .carousel-inner > .item.next.left,
#my-carousel > .carousel-inner > .item.prev.right,
#my-carousel > .carousel-inner > .item.active {
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#my-carousel > .carousel-inner > .active {
top: 0;
}
#my-carousel > .carousel-inner > .next,
#my-carousel > .carousel-inner > .prev {
top: 0;
width: auto;
height: 100%;
}
#my-carousel > .carousel-inner > .next {
left: 0;
top: 100%;
}
#my-carousel > .carousel-inner > .prev {
left: 0;
top: -100%
}
#my-carousel > .carousel-inner > .next.left,
#my-carousel > .carousel-inner > .prev.right {
top: 0;
}
#my-carousel > .carousel-inner > .active.left {
left: 0;
top: -100%;
}
#my-carousel > .carousel-inner > .active.right {
left: 0;
top: 100%;
}
/*Animation Cubic Bizer*/
#my-carousel .carousel-inner > .item {
transition-timing-function: cubic-bezier(.24,1.01,.3,.53);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div class="item">
<img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-carousel" 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="#my-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Have you tried to delete the CSS? You will get the CSS from bootstrap automatically.
If you want to override Bootstraps CSS try to put !important after the line in CSS.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div class="item">
<img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-carousel" 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="#my-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

3-columns carousel slider black and white centered image

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>

Bootstrap Overlay image not responsive

I'm using this CSS Code to make an image overlay on top of a slider in bootstrap but when resizing down the image is not responsive:
.overlay {
background: url(../img/bocSlider.png) top left no-repeat;
position: absolute;
background-position: center;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
#media (min-width: 768px) and (max-width: 979px) {
.overlay{
width:50%;
height:50%;
}
}
#media (max-width: 767px) {
.overlay{
width:50%;
height:50%;
}
}
#media (max-width: 480px) {
.overlay{
width:50%;
height:50%;
}
}
Below is the HTML for the slider that I am using:
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="overlay" class="img-responsive"></div>
<div class="item active">
<img src="/img/Bar.jpg" class="fill">
</div>
<div class="item">
<img src="/img/Outside.jpg" class="fill">
</div>
<div class="item">
<img src="/img/Table_1.jpg" class="fill">
</div>
<div class="item">
<img src="/img/Tables_2.jpg" class="fill">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
Could someone please help me fix this issue?
Image is a .png

You can use background color instead of overlay image.
just write
background-color:rgba(0,0,0,.5);
Hope this will help you.

In you css add background size property
.overlay {
background: url(../img/bocSlider.png) top left no-repeat;
position: absolute;
background-position: center;
background-size: 100%;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
You are adding class in wrong way and in bootstrap img-responsive applies to img tag,
<div class="overlay" class="img-responsive"></div>
Should be
<div class="overlay img-responsive"></div>
For your code remove img-responsive
<div class="overlay"></div>

Bootstrap carousel slide left to right

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

Categories

Resources