Menu
Trying to find a way to have a Bootstrap 3 Carousel limit the main image it's displaying to the images natural width and show parts of the previous and next images to fill the remainder of the screen to 100% width under the next/previous arrows. Not quite sure how to reveal previews of the next and previous images.
Using standard Bootstrap carousel code:
<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>
</ol>
<div class="carousel-inner center-block" style="width:80%;max-width:960px;" >
<div class="item active"> <img src="/images/slide-fpo.png" style="width:100%" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Slide 1</h1>
<!-- <p>Aenean a rutrum nulla. Vestibulum a arcu at nisi tristique pretium.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> -->
</div>
</div>
</div>
<div class="item"> <img src="/images/slide-fpo.png" style="width:100%" data-src="" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Slide 2</h1>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae egestas purus. </p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> -->
</div>
</div>
</div>
<div class="item"> <img src="/images/slide-fpo.png" style="width:100%" data-src="" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>Slide 3</h1>
<!-- <p>Donec sit amet mi imperdiet mauris viverra accumsan ut at libero.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> -->
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div>
277
The code below works when all images got the same width, otherwise you can do the same but then you need more complex calculation per slide.
First give each div.item three image (previous, current, next):
<div class="item active">
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
<img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
<img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />
</div>
Then use the following Less code:
@import "bootstrap-3.3.2/less/variables";
@image-width: 600px;
.item img {
max-width:100%;
&:first-child,&:last-child {
display: none;
}
}
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
@rest: ((@screen-sm - ( 2 * @grid-gutter-width)) - @image-width);
.item img {
float:left;
&:first-child,&:last-child {
display: block;
}
width: @image-width;
}
.item.active {
overflow:hidden;
margin: 0 ((@image-width - (@rest / 2 ) ) * -1);
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
@rest: ((@screen-md - ( 2 * @grid-gutter-width)) - @image-width);
.item img {
width: @image-width;
}
.item.active {
margin: 0 ((@image-width - (@rest / 2 ) ) * -1);
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {
@rest: ((@screen-lg - ( 2 * @grid-gutter-width)) - @image-width);
.item img {
width: @image-width;
}
.item.active {
margin: 0 ((@image-width - (@rest / 2 ) ) * -1);
}
}
In the above set @image-width to the width of your slider images. The preceding Less code compiles into the following CSS code:
.item img {
max-width: 100%;
}
.item img:first-child,
.item img:last-child {
display: none;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.item img {
float: left;
width: 600px;
}
.item img:first-child,
.item img:last-child {
display: block;
}
.item.active {
overflow: hidden;
margin: 0 -546px;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.item img {
width: 600px;
}
.item.active {
margin: 0 -434px;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.item img {
width: 600px;
}
.item.active {
margin: 0 -330px;
}
}
Demo:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.item img {
max-width: 100%;
}
.item img:first-child,
.item img:last-child {
display: none;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.item img {
float: left;
width: 600px;
}
.item img:first-child,
.item img:last-child {
display: block;
}
.item.active {
overflow: hidden;
margin: 0 -546px;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.item img {
width: 600px;
}
.item.active {
margin: 0 -434px;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.item img {
width: 600px;
}
.item.active {
margin: 0 -330px;
}
</style>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-example-generic" data-slide-to="1"></li>
<li class="" data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
<img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
<img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />
</div>
<div class="item">
<img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
<img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />
<img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
</div>
<div class="item">
<img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />
<img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
</div>
<div class="item">
<img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
<img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
</div>
</div>
<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>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
