<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"> <h3>Ravi <span class="in_sport">Blue T-Shirt</span></h3> <table class="table"> <tbody> <tr> <td><span>Estimated Delivery</span></td> <td>Nov 31, Wed - Dec 5, Sun</td> </tr> <tr> <td><span>Minimum Order Qty</span></td> <td>100 Units </td> </tr> <tr> <td><span>Product Code</span></td> <td>YUE3061</td> </tr> </tbody> </table> <div class="product-color"> <span>Color</span> <div class="color-choose"> <div> <input data-image="black" type="radio" id="black" name="color" value="black" checked> <label for="black"><span></span></label> </div> <div> <input data-image="white" type="radio" id="white" name="color" value="white"> <label for="white"><span></span></label> </div> <div> <input data-image="yellow" type="radio" id="yellow" name="yellow" value="yellow"> <label for="yellow"><span></span></label> </div> </div> </div> <hr> <div class="row"> <div class="col-md-12"> <h6><span>Retail Price</span></h6> <h3 class="price">Rs 340.00 /unit</h3> <h4><span>Email ID- : ravi7284007@gmail.com</span></h4> </div> </div> <a href="#0" class="btn btn-cart">ADD TO CART</a> </div> </div> <h2>About this Product</h2> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p> </div> </section>

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; -webkit-border-radius: 0; border-radius: 0; display: unset; height: auto; margin: 0 !important; width: auto; } #carousel-custom .carousel-indicators li img { display: block; } #carousel-custom .carousel-indicators li:hover img { opacity: 0.75; } #carousel-custom .carousel-outer { position: relative; } div#carousel-custom { margin: 0 0 50px; } /* Left Column */ .left_img img { display: none !important; transition: all 0.3s ease; } .left_img img.current { display: block !important } /* Product Color */ .product-color { margin-bottom: 30px; } .color-choose > div { display: inline-block; } .color-choose input[type="radio"] { display: none; } .color-choose input[type="radio"] + label span { display: inline-block; width: 40px; height: 40px; margin: -1px 4px 0 0; vertical-align: middle; cursor: pointer; border-radius: 50%; } .color-choose input[type="radio"] + label span { border: 2px solid #FFFFFF; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33); } .color-choose input[type="radio"]#black + label span { background-color: #151515; } .color-choose input[type="radio"]#white + label span { background-color: #fff; } .color-choose input[type="radio"]#yellow + label span { background-color: #003CFF; } .color-choose input[type="radio"]:checked + label span { background-image: url(../img/check-icn.svg); background-repeat: no-repeat; background-position: center; } .btn-cart { font-size: 18px; color: #fff; border-radius: 0; background: #f06902; padding: 17px 120px; display: inline-block; margin-bottom: 20px; }

$(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'); }); });