"Responsive Moving Box Carousel"
Bootstrap 3.3.0 Snippet by mubarakcc7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="col-xs-12">
<div class="page-header">
<h3>Bootstrap 3.3.0</h3>
<p>Responsive Moving Box Carousel Demo</p>
</div>
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Global */
img { max-width:100%; }
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE7 */
opacity: 0.6;
text-decoration: none;
}
body{
border-top:0;
background:#c4e17f;
background-image:-webkit-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:-moz-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:-o-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:linear-gradient(to right,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4)
}
.thumbnails li> .fff .caption {
background:#fff !important;
padding:10px
}
/* Page Header */
.page-header {
background: #f9f9f9;
margin: -30px -40px 40px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
// Carousel Auto-Cycle
$(document).ready(function() {
$('.carousel').carousel({
interval: 6000
})
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Super well done... especially the considerations for how it sizes at tablet and mobile smaller sizes and still scrolls well. kudos!
(and thanks!)

Ryan moore () - 8 years ago - Reply 1


there is a bug, is covering all divs

zakaria mniakh () - 8 years ago - Reply -1


there is a bug, "a data-slide" is covering all divs

zakaria mniakh () - 8 years ago - Reply 0


Able to add the Page 1of 3?

Thanks.

YC () - 7 years ago - Reply 0


Thanks for this great template! Is there missing in line 173 in the html file?

Shujian Liu () - 7 years ago - Reply 0


farshad angouti () - 8 years ago - Reply 0


Here is the same snippets which i have used in my website just check it out awesomeness
everiningply.com

Ayesha Sharma () - 8 years ago - Reply 0


every box are set as perfect but its not moving .. I think the jquery is not working there... give me some solutions

Haran () - 8 years ago - Reply 0


actually, its not moving even i did past the js code into inline script

Haran () - 8 years ago - Reply 0


awesome

Olatunji Olabanji () - 8 years ago - Reply 0


How do you download this code? I'm new to this website

I copied the code linked the html page to the style sheet and js but it comes out all wrong :(

Jamie Foxx () - 9 years ago - Reply 0


Great Snippet. Just a quick note. The tag is missing on the next pager item (line 173).

Candecor () - 9 years ago - Reply 0


How can I AutoRotate stop in this script ?

Dharmesh Dobariya () - 9 years ago - Reply 0


Notice how it bumps down after it finished shifting left or right?

The ul tag causes this. Simply add this to fix it:

ul.thumbnails { margin-bottom: 0px;}

Edward A Husarcik () - 9 years ago - Reply 0


in addition to it, to center it add:

ul.thumbnails {
margin-bottom: 0px;
padding: 0;
}

SG () - 9 years ago - Reply 0


Saint Maclou, evidemmeennnnt !!

Support LS24 () - 9 years ago - Reply 0


why always my JS code dont want to work ??

med ali () - 9 years ago - Reply 0


did you include jquery files in your page ?

Support LS24 () - 9 years ago - Reply 0