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

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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.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://picsum.photos/600/700/?random" alt="" /> <img class="current" data-image="white" src="https://picsum.photos/600/706/?random" alt="" /> <img data-image="black" src="https://picsum.photos/600/703/?random" alt="" /> </li>
<li data-target="#carousel-custom" data-slide-to="1"> <img data-image="black" src="https://picsum.photos/600/704/?random" alt="" /> <img data-image="white" src="https://picsum.photos/600/707/?random" alt="" /> <img data-image="yellow" src="https://picsum.photos/600/701/?random" alt="" /> </li>
<li data-target="#carousel-custom" data-slide-to="2"> <img data-image="black" src="https://picsum.photos/600/705/?random" alt="" /> <img data-image="yellow" src="https://picsum.photos/600/702/?random" alt="" /> <img data-image="white" src="https://picsum.photos/600/708/?random" 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://picsum.photos/600/700/?random" alt="" /> <img class="current" data-image="white" src="https://picsum.photos/600/706/?random" alt="" /> <img data-image="black" src="https://picsum.photos/600/703/?random" alt="" /> </div>
<div class="item" > <img data-image="black" src="https://picsum.photos/600/704/?random" alt="" /> <img data-image="white" src="https://picsum.photos/600/707/?random" alt="" /> <img data-image="yellow" src="https://picsum.photos/600/701/?random" alt="" /> </div>
<div class="item" > <img data-image="black" src="https://picsum.photos/600/705/?random" alt="" /> <img data-image="white" src="https://picsum.photos/600/708/?random" alt="" /> <img data-image="yellow" src="https://picsum.photos/600/702/?random" 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


Questions / Comments: