Carousel Rows
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<h4>Made with <i class="fa fa-fw fa-heart text-danger"></i> by <a href="http://twitter.com/AlexMahrt" class="btn btn-primary btn-xs" target="_blank"><i class="fa fa-fw fa-twitter"></i> @AlexMahrt</a></h4>
</div>
</div>
<hr>
<!-- Begin of rows -->
<div class="row carousel-row">
<div class="col-xs-8 col-xs-offset-2 slide-row">
<div id="carousel-1" class="carousel slide slide-carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/150/150?rand=1" alt="Image">
</div>
<div class="item">
<img src="http://lorempixel.com/150/150?rand=2" alt="Image">
</div>
<div class="item">
<img src="http://lorempixel.com/150/150?rand=3" alt="Image">
</div>
</div>
</div>
<div class="slide-content">
<h4>Example product</h4>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
</p>
</div>
<div class="slide-footer">
<span class="pull-right buttons">
<button class="btn btn-sm btn-default"><i class="fa fa-fw fa-eye"></i> Show</button>
<button class="btn btn-sm btn-primary"><i class="fa fa-fw fa-shopping-cart"></i> Buy</button>
</span>
</div>
</div>
</div>
<div class="row carousel-row">
<div class="col-xs-8 col-xs-offset-2 slide-row">
<div id="carousel-2" class="carousel slide slide-carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-2" data-slide-to="1"></li>
<li data-target="#carousel-2" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/150/150?rand=4" alt="Image">
</div>
<div class="item">
<img src="http://lorempixel.com/150/150?rand=5" alt="Image">
</div>
<div class="item">
<img src="http://lorempixel.com/150/150?rand=6" alt="Image">
</div>
</div>
</div>
<div class="slide-content">
<h4>Long text product</h4>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</div>
<div class="slide-footer">
<span class="pull-right buttons">
<button class="btn btn-sm btn-default"><i class="fa fa-fw fa-eye"></i> Show</button>
<button class="btn btn-sm btn-primary"><i class="fa fa-fw fa-shopping-cart"></i> Buy</button>
</span>
</div>
</div>
</div>
<div class="row carousel-row">
<div class="col-xs-8 col-xs-offset-2 slide-row">
<div id="carousel-3" class="carousel slide slide-carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-3" data-slide-to="0" class="active"></li>
<li data-target="#carousel-3" data-slide-to="1"></li>
<li data-target="#carousel-3" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/150/150?rand=7" alt="Image">
</div>
<div class="item">
<img src="http://lorempixel.com/150/150?rand=8" alt="Image">
</div>
<div class="item">
<img src="http://lorempixel.com/150/150?rand=9" alt="Image">
</div>
</div>
</div>
<div class="slide-content">
<h4>Example product</h4>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
</p>
</div>
<div class="slide-footer">
<span class="pull-right buttons">
<button class="btn btn-sm btn-default"><i class="fa fa-fw fa-eye"></i> Show</button>
<button class="btn btn-sm btn-primary"><i class="fa fa-fw fa-shopping-cart"></i> Buy</button>
</span>
</div>
</div>
</div>
</div>
/* FONT AWESOME & not necessary for functions */
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
body {
padding-top: 15px;
background-color: #f9f9f9;
}
/*REQUIRED*/
.carousel-row {
margin-bottom: 10px;
}
.slide-row {
padding: 0;
background-color: #ffffff;
min-height: 150px;
border: 1px solid #e7e7e7;
overflow: hidden;
height: auto;
position: relative;
}
.slide-carousel {
width: 20%;
float: left;
display: inline-block;
}
.slide-carousel .carousel-indicators {
margin-bottom: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
}
.slide-carousel .carousel-indicators li {
border-radius: 0;
width: 20px;
height: 6px;
}
.slide-carousel .carousel-indicators .active {
margin: 1px;
}
.slide-content {
position: absolute;
top: 0;
left: 20%;
display: block;
float: left;
width: 80%;
max-height: 76%;
padding: 1.5% 2% 2% 2%;
overflow-y: auto;
}
.slide-content h4 {
margin-bottom: 3px;
margin-top: 0;
}
.slide-footer {
position: absolute;
bottom: 0;
left: 20%;
width: 78%;
height: 20%;
margin: 1%;
}
/* Scrollbars */
.slide-content::-webkit-scrollbar {
width: 5px;
}
.slide-content::-webkit-scrollbar-thumb:vertical {
margin: 5px;
background-color: #999;
-webkit-border-radius: 5px;
}
.slide-content::-webkit-scrollbar-button:start:decrement,
.slide-content::-webkit-scrollbar-button:end:increment {
height: 5px;
display: block;
}
Very nice , good work <3,how do i get font-awsome.css ?,Hello http://getbootstrap.com/,My friend you forgot to put the PRICE option ?Good enough and pic might have been better if you gave some padding inside the box area .,I copied the html and css yet it’s not working. only one image change per refresh (unlike the preview).. Any help?,Do you have Bootstrap’s JS and CSS in place as well? You can download the full snippet if you are registered and logged in here on Bootsnipp and check what you’re missing that way,Is there a way to make the image non-responsive or not scale so small? I tried putting columns in the rows and giving the image a fixed width- but fail. I tried a few other ways and mega fail, the images got even smaller. I would prefer it to be responsive without scaling so small.,Thanks.. I was missing the <script src=”http://netdna.bootstrapcdn….”></script>,Wow…..It’s so beautiful…Thanks.,nice one,The author is Cyruxx

Loading...