<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"></script> <div class="pt-5"></div> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="individual-car-title"> <h3>Kia Soul, Brand New Model 2016</h3> <h4>4.85 Lakh</h4> <ul class="list-unstyled list-inline"> <li class="list-inline-item"> Ahmedabad (reg) </li> <li class="list-inline-item"> | </li> <li class="list-inline-item"> Second Owner </li> <li class="list-inline-item"> | </li> <li class="list-inline-item"> 36 Views </li> <li class="list-inline-item"> | </li> <li class="list-inline-item"> <!-- AddToAny BEGIN --> <a class="a2a_dd" href="https://www.addtoany.com/share"><i class="fa fa-share-alt"></i> Share </a> <script async src="https://static.addtoany.com/menu/page.js"></script> <!-- AddToAny END --> </li> </ul> </div> <div class="cars-gallery"> <div class="swiper-container gallery-top"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> </div> <!-- Add Arrows --> <div class="swiper-button-next swiper-button-white"></div> <div class="swiper-button-prev swiper-button-white"></div> </div> <div class="swiper-container gallery-thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://gaadicdn.com/usedcar_image/gallery/VCC_851965_1_1522909196739_22_649825_8_1522909575.jpg"> </div> </div> </div> </div> </div> <div class="cars-tabs"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-12"> <h4>Overview</h4> </div> <div class="col-md-6"> <ul> <li><strong>Year :</strong> 2017 </li> <li><strong>Kilometer :</strong> 39,239 km </li> <li><strong>Fuel Type :</strong> Petrol </li> <li><strong>Transmission :</strong> Manual </li> <li><strong>Color :</strong> Black </li> <li><strong>No. of Owner(s) :</strong> First </li> </ul> </div> <div class="col-md-6"> <ul> <li><strong>Transmission :</strong> Manual </li> <li><strong>Color :</strong> Black </li> <li><strong>No. of Owner(s) :</strong> First </li> </ul> </div> <div class="col-md-12"> <footer class="blockquote-footer">Please mention whenever you call that you found the details on this particular site.</footer> <footer class="blockquote-footer">Always arrange a meeting in a safe place.</footer> <footer class="blockquote-footer">This site helps you in searching for a vehicle. We do not verify the authenticity of the product.</footer> </div> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="menu sticky-top "> <div class="card bg-light "> <div class="card-body"> <small> Get in touch with Seller</small> <h3><i class="fa fa-inr"></i> 4.85 Lakh</h3> <div class="form-group"> <input type="text" class="form-control" id="name1" placeholder="Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="phone1" placeholder="Mobile"> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="updatecheck1"> <label class="form-check-label" for="updatecheck1"> <small>By submitting this form you agree to our <a href="#">terms and conditions </a> </small> </label> </div> <div class="pb-3"> </div> <button type="button" class="btn btn-warning">Contact the Seller</button> </div> </div> </div> </div> </div> </div>

img {width:100%;} /******************* SWIPPER ********************/ .swiper-container { width: 100%; height: 300px; margin-left: auto; margin-right: auto; } .swiper-slide { background-size: cover; background-position: center; } .gallery-top { height: 80%; width: 100%; } .gallery-thumbs { height: 20%; box-sizing: border-box; padding: 10px 0; } .gallery-thumbs .swiper-slide { width: 25%; height: 100%; opacity: 0.4; } .gallery-thumbs .swiper-slide-active { opacity: 1; }

var galleryTop = new Swiper('.gallery-top', { spaceBetween: 10, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); var galleryThumbs = new Swiper('.gallery-thumbs', { spaceBetween: 10, centeredSlides: true, slidesPerView: 'auto', touchRatio: 0.2, slideToClickedSlide: true, }); galleryTop.controller.control = galleryThumbs; galleryThumbs.controller.control = galleryTop;