"cart carousel slider + media slider with color swatches created by ravi"
Bootstrap 3.3.0 Snippet by mani88100ni

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 ---------->
<section id="description">
<div class="container">
<div class="row">
<div class="col-md-7 ">
<div id="carousel-custom" class="carousel slide left_img" data-ride="carousel">
<div class="row">
<div class="col-md-3">
<ol class="carousel-indicators mCustomScrollbar meartlab">
<li data-target="#carousel-custom" data-slide-to="0" class="active"> <img data-image="yellow" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/26903628_1287758011354162_408786852708690876_n.jpg?oh=18898589c338ee69b6e6d281926f938c&oe=5ADFDF14" alt="" /> <img class="current" data-image="white" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/20882922_1191283414334956_81049157947784454_n.jpg?oh=4e890f9fba08ac2a3cc27246388f26b4&oe=5B161A6B" alt="" /> <img data-image="black" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/25507926_1262786377184659_683581835207662055_n.jpg?oh=0536c0582f45e4893bf126ccdc70c485&oe=5AE1247D" alt="" /> </li>
<li data-target="#carousel-custom" data-slide-to="1"> <img data-image="black" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/25442933_1262782193851744_5225388194854897969_n.jpg?oh=92b0a4eb3afe30e9c69a384b52c091ec&oe=5B15173A" alt="" /> <img class="current" data-image="white" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/20953031_1192252997571331_7009270971114957323_n.jpg?oh=c927782ed026b0a22253ccf493607042&oe=5B1A2805" alt="" /> <img data-image="yellow" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/26903908_1287758164687480_4639171229686138684_n.jpg?oh=3e48406aed77b7acc27b6fd834acd40d&oe=5AE51307" alt="" /> </li>
<li data-target="#carousel-custom" data-slide-to="2"> <img data-image="black" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/24909605_1257776487685648_5892381250950520683_n.jpg?oh=0e7c70b0e29cc799055deb3ca344d70d&oe=5ADC051B" alt="" /> <img data-image="yellow" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/26992650_1287760278020602_1589789922654686302_n.jpg?oh=3bbc5ab22a5c67f8b2e0432909f82112&oe=5AE723F7" alt="" /> <img class="current" data-image="white" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/20882922_1191283414334956_81049157947784454_n.jpg?oh=4e890f9fba08ac2a3cc27246388f26b4&oe=5B161A6B" alt="" /> </li>
</ol>
</div>
<div class="col-md-9">
<div class="carousel-outer">
<!-- me art lab slider -->
<div class="carousel-inner ">
<div class="item active"> <img data-image="yellow" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/26903628_1287758011354162_408786852708690876_n.jpg?oh=18898589c338ee69b6e6d281926f938c&oe=5ADFDF14" alt="" /> <img class="current" data-image="white" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/20882922_1191283414334956_81049157947784454_n.jpg?oh=4e890f9fba08ac2a3cc27246388f26b4&oe=5B161A6B" alt="" /> <img data-image="black" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/25507926_1262786377184659_683581835207662055_n.jpg?oh=0536c0582f45e4893bf126ccdc70c485&oe=5AE1247D" alt="" /> </div>
<div class="item" > <img data-image="black" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/25442933_1262782193851744_5225388194854897969_n.jpg?oh=92b0a4eb3afe30e9c69a384b52c091ec&oe=5B15173A" alt="" /> <img class="current" data-image="white" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/20953031_1192252997571331_7009270971114957323_n.jpg?oh=c927782ed026b0a22253ccf493607042&oe=5B1A2805" alt="" /> <img data-image="yellow" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/26903908_1287758164687480_4639171229686138684_n.jpg?oh=3e48406aed77b7acc27b6fd834acd40d&oe=5AE51307" alt="" /> </div>
<div class="item" > <img data-image="black" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/24909605_1257776487685648_5892381250950520683_n.jpg?oh=0e7c70b0e29cc799055deb3ca344d70d&oe=5ADC051B" alt="" /> <img class="current" data-image="white" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/20882922_1191283414334956_81049157947784454_n.jpg?oh=4e890f9fba08ac2a3cc27246388f26b4&oe=5B161A6B" alt="" /> <img data-image="yellow" src="https://scontent.fdel8-1.fna.fbcdn.net/v/t1.0-9/26992650_1287760278020602_1589789922654686302_n.jpg?oh=3bbc5ab22a5c67f8b2e0432909f82112&oe=5AE723F7" alt="" /> </div>
</div>
<!-- sag sol -->
<a class="left carousel-control" href="#carousel-custom" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-custom" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
</div>
</div>
<!-- thumb -->
</div>
</div>
<div class="col-md-5">
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
img {
max-width: 100%;
height: auto;
display: inline-block
}
#carousel-custom .carousel-inner {
position: relative;
width: 100%;
min-height: 300px;
}
#carousel-custom .carousel-control.right {
right: 0;
left: auto;
background-image: none !important;
background-repeat: repeat-x;
}
#carousel-custom .carousel-control.left {
left: 0;
right: auto;
background-image: none !important;
background-repeat: repeat-x;
}
#carousel-example-generic {
margin: 20px auto;
width: 100%;
}
#carousel-custom .carousel-indicators {
margin: 0 0;
overflow: auto;
position: static;
text-align: left;
white-space: nowrap;
width: 100%;
overflow: hidden;
}
#carousel-custom .carousel-indicators li {
background-color: transparent;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
$('.color-choose input').on('click', function() {
var ravi_color = $(this).attr('data-image');
$('.current').removeClass('current');
$('.left_img img[data-image = ' + ravi_color + ']').addClass('current');
$(this).addClass('current');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2 Angular
Client or Partners Logo Slider
Bootstrap 4 Carousel
Carousel with Search

Questions / Comments: