"Product Carousal Responsive (Single Product View For Mobile)"
Bootstrap 3.3.0 Snippet by hadi887

Post to Facebook Tweet this

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 ---------->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="http://yourjavascript.com/21051171187/jquery-touchswipe-min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/11873115711/jquery-1-12-4-min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/71712155041/responsive-bootstrap-carousel.js"></script>
<div class="container">
<div class="row">
<div id="adv_team_4_columns_carousel" class="carousel slide four_shows_one_move team_columns_carousel_wrapper" data-ride="carousel" data-interval="2000" data-pause="hover">
<!--========= Wrapper for slides =========-->
<div class="carousel-inner" role="listbox">
<!--========= 1st slide =========-->
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image">
<img src="http://placehold.it/150x150" alt="slider 01">
<div class="team_columns_item_caption">
<h4>Lahore</h4>
<hr>
<h5>PAKISTAN</h5>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1">
<img src="http://placehold.it/150x150" alt="slider 02">
<div class="team_columns_item_caption">
<h4>Lahore</h4>
<hr>
<h5>PAKISTAN</h5>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2">
<img src="http://placehold.it/150x150" alt="slider 02">
<div class="team_columns_item_caption">
<h4>Karachi</h4>
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
.team_columns_carousel_wrapper {
padding: 25px;
overflow: hidden
}
.team_columns_carousel_control_left,
.team_columns_carousel_control_right {
top: 26px;
z-index: 2;
opacity: 1;
width: 35px;
height: 35px;
border: 0;
text-shadow: none;
text-align: center;
-webkit-transition: all ease-in-out .3s;
transition: all ease-in-out .3s
}
.team_columns_carousel_control_icons {
line-height: 35px;
font-size: 20px!important;
font-weight: normal!important;
margin-top:8px;
}
.team_columns_carousel_control_left {
left: 26px!important
}
.team_columns_carousel_control_right {
left: 63px!important
}
.adv_left {
left: 41px!important
}
.adv_right {
left: 78px!important
}
.team_columns_item_image {
padding-top: 60px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rotating CSS Card
Bootstrap 4 and CCS3 Product Cards with Transition
arrow key navigation thumbnail gallery modal view
Creating password field text hide show via a single class

Questions / Comments: