Bootstrap Snippet Products slider Responsive using HTML CSS Bootstrap jQuery

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="row">
        <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
    </div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
    <div class="page-header">
        <h3>Bootstrap</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="jpg">
                            <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>
                        </li>
                        <li class="col-xs-6 col-sm-4">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
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 */
body {
    background: #3399cc;
    padding: 40px;
}  
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;
    }
/* Container */
.container-fluid {
    background: #FFFFFF;
    margin: 40px auto 10px;
    padding: 20px 40px 0;
    max-width: 960px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
/* 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

"Products slider Responsive"
Bootstrap 3.3.0 Snippet by Naina786

Related: See More

Questions / Comments:

"Products slider Responsive" Bootstrap 3.3.0 Snippet by Naina786

Related: See More

Questions / Comments:

"Products slider Responsive"
Bootstrap 3.3.0 Snippet by Naina786