<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> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="product-heading"> <h2>Maruti Ritz ZDi</h2> <h3>Rs. 4.65 Lakh</h3> <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"> 1959661 Used Car ID </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-overview card-body pt-3 bg-warning border mt-2"> <div class="row"> <div class="col-md-12"> <h4>Overview</h4> </div> </div> <div class="row pt-2"> <div class="col-md-4"> <ul class="list-inline list-unstyled"> <li class="list-inline-item "> <i class="fa fa-road pr-1"></i> Km's Driven :</li> <li class="list-inline-item"> 24000KM</li> </ul> </div> <div class="col-md-4"> <ul class="list-inline list-unstyled"> <li class="list-inline-item "> <i class="fa fa-calendar-o pr-1"></i> Year :</li> <li class="list-inline-item"> 2010</li> </ul> </div> <div class="col-md-4"> <ul class="list-inline list-unstyled"> <li class="list-inline-item "> <i class="fa fa-car pr-1"></i> Fuel Type :</li> <li class="list-inline-item"> Petrol</li> </ul> </div> <div class="col-md-4"> <ul class="list-inline list-unstyled"> <li class="list-inline-item "> <i class="fa fa-road pr-1"></i> Transmission :</li> <li class="list-inline-item"> automatic</li> </ul> </div> <div class="col-md-4"> <ul class="list-inline list-unstyled"> <li class="list-inline-item "> <i class="fa fa-calendar-o pr-1"></i> Condition :</li> <li class="list-inline-item"> Slightly used</li> </ul> </div> <div class="col-md-4"> <ul class="list-inline list-unstyled"> <li class="list-inline-item "> <i class="fa fa-car pr-1"></i> Body style :</li> <li class="list-inline-item"> SUV</li> </ul> </div> </div> </div> <div class="cars-features card-body pt-3 bg-warning border mt-2"> <div class="row"> <div class="col-md-12"> <h4>Top Specs & Features</h4> </div> </div> <div class="row pt-2"> <div class="col-md-4"> <ul class="list-inline list-unstyled"> <li class="list-inline-item "> <i class="fa fa-road pr-1"></i> Km's Driven :</li> <li class="list-inline-item"> 24000KM</li> </ul> </div> <div class="col-md-4"> <ul class="list-inline list-unstyled"> <li class="list-inline-item "> <i class="fa fa-calendar-o pr-1"></i> Year :</li> <li class="list-inline-item"> 2010</li> </ul> </div> <div class="col-md-4"> <ul class="list-inline list-unstyled"> <li class="list-inline-item "> <i class="fa fa-car pr-1"></i> Fuel Type :</li> <li class="list-inline-item"> Petrol</li> </ul> </div> <div class="col-md-4"> <ul class="list-inline list-unstyled"> <li class="list-inline-item "> <i class="fa fa-road pr-1"></i> Transmission :</li> <li class="list-inline-item"> automatic</li> </ul> </div> <div class="col-md-4"> <ul class="list-inline list-unstyled"> <li class="list-inline-item "> <i class="fa fa-calendar-o pr-1"></i> Condition :</li> <li class="list-inline-item"> Slightly used</li> </ul> </div> <div class="col-md-4"> <ul class="list-inline list-unstyled"> <li class="list-inline-item "> <i class="fa fa-car pr-1"></i> Body style :</li> <li class="list-inline-item"> SUV</li> </ul> </div> </div> </div> <div class="cars-details bg-warning border mt-2"> <div id="accordion"> <div class="card"> <div class="card-header bg-warning"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> Specifications </a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. Donec facilisis fermentum sem, ac viverra ante luctus vel. Donec vel mauris quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. Donec facilisis fermentum sem, ac viverra ante luctus vel. Donec vel mauris quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. Donec facilisis fermentum sem, ac viverra ante luctus vel. Donec vel mauris quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. Donec facilisis fermentum sem, ac viverra ante luctus vel. Donec vel mauris quam.</p> </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> Engine </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> <table class="table-specifications table table-striped table-hover"> <tbody> <tr> <td>Engine type</td> <td>SKYACTIV-G 2.5 L DOHC 16-valve 4-cylinder engine with VVT</td> </tr> <tr> <td>Displacement</td> <td>2,488 cc</td> </tr> <tr> <td>Compression ratio</td> <td>13.0:1</td> </tr> <tr> <td>Horsepower SAE net</td> <td>184 @ 5,700 rpm</td> </tr> <tr> <td>Torque SAE net lb. ft.</td> <td>185 @ 3,250 rpm</td> </tr> <tr> <td>Fuel system</td> <td>Direct injection</td> </tr> <tr> <td>Recommended fuel</td> <td>Regular</td> </tr> <tr> <td>Fuel economy city/highway (L/100 km)*<br>Manual<br>Automatic</td> <td>8.1/5.3<br>7.6/5.1</td> </tr> <tr> <td>Curb weight (kg)<br> Manual<br>Automatic</td> <td>1,442<br>1,465</td> </tr> </tbody> </table> </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> Exterior </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> <table class="table-specifications table table-striped table-hover"> <tbody> <tr> <td>Wheelbase/overall length (mm)</td> <td>2,830/4,895</td> </tr> <tr> <td>Overall width (mm)</td> <td>1,840</td> </tr> <tr> <td>Overall height (mm)</td> <td>1,450</td> </tr> <tr> <td>Track (fr/rr) (mm)<br>17" wheels<br>19" wheels</td> <td>1,585/1,575<br>1,595/1,585</td> </tr> <tr> <td>Turning circle, curb-to-curb (m)</td> <td>11.2</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card card-outline-secondary"> <div class="card-header"> <h3 class="mb-0">Contact</h3> </div> <div class="card-body"> <form class="form" role="form" autocomplete="off"> <fieldset> <label for="name2" class="mb-0">Name</label> <div class="row mb-1"> <div class="col-lg-12"> <input type="text" name="name2" id="name2" class="form-control" required=""> </div> </div> <label for="email2" class="mb-0">Email</label> <div class="row mb-1"> <div class="col-lg-12"> <input type="text" name="email2" id="email2" class="form-control" required=""> </div> </div> <label for="message2" class="mb-0">Message</label> <div class="row mb-1"> <div class="col-lg-12"> <textarea rows="6" name="message2" id="message2" class="form-control" required=""></textarea> </div> </div> <button type="submit" class="btn btn-secondary btn-lg float-right">Send Message</button> </fieldset> </form> </div> </div> </div> </div> </div> <div class="container"> <div class="row mt-3"> <div class="col-md-12"> <h3> Find Similar Products</h3> <p>Listopia - Directory, Community Theme</p> </div> </div> <div class="row mt-2"> <div class="col-md-12"> <div class="row"> <div class="col-md-12"> <div class="row py-2"> <div class="col-md-3 vertical-box"> <div class="card"> <img class="card-img-top mh200-text" src="https://img2.gaadicdn.com/images/usedcarimages/320x224/11-2017/1843403/IMG_6603.jpg" alt="Card image"> <div class="card-body"> <h4 class="card-title mw30-text">2006 Toyota Innova 2.5 V Diesel 7-seater 2006 Toyota Innova 2.5 V Diesel 7-se</h4> <h5 class="card-text">Rs. 25.32 Lac*</h5> <ul class="list-inline"> <li class="list-inline-item">44,114 Km</li> <li class="list-inline-item">Petrol</li> <li class="list-inline-item">Gurugram</li> </ul> <button type="button" class="btn btn-outline-danger">Contact Sellers</button> </div> </div> </div> <div class="col-md-3 vertical-box"> <div class="card"> <img class="card-img-top mh200-text" src="https://img2.gaadicdn.com/images/usedcarimages/320x224/11-2017/1843403/IMG_6603.jpg" alt="Card image"> <div class="card-body"> <h4 class="card-title mw30-text">2006 Toyota Innova 2.5 V Diesel 7-seater 2006 Toyota Innova 2.5 V Diesel 7-se</h4> <h5 class="card-text">Rs. 25.32 Lac*</h5> <ul class="list-inline"> <li class="list-inline-item">44,114 Km</li> <li class="list-inline-item">Petrol</li> <li class="list-inline-item">Gurugram</li> </ul> <button type="button" class="btn btn-outline-danger">Contact Sellers</button> </div> </div> </div> <div class="col-md-3 vertical-box"> <div class="card"> <img class="card-img-top mh200-text" src="https://img2.gaadicdn.com/images/usedcarimages/320x224/11-2017/1843403/IMG_6603.jpg" alt="Card image"> <div class="card-body"> <h4 class="card-title mw30-text">2006 Toyota Innova 2.5 V Diesel 7-seater 2006 Toyota Innova 2.5 V Diesel 7-se</h4> <h5 class="card-text">Rs. 25.32 Lac*</h5> <ul class="list-inline"> <li class="list-inline-item">44,114 Km</li> <li class="list-inline-item">Petrol</li> <li class="list-inline-item">Gurugram</li> </ul> <button type="button" class="btn btn-outline-danger">Contact Sellers</button> </div> </div> </div> <div class="col-md-3 vertical-box"> <div class="card"> <img class="card-img-top mh200-text" src="https://img2.gaadicdn.com/images/usedcarimages/320x224/11-2017/1843403/IMG_6603.jpg" alt="Card image"> <div class="card-body"> <h4 class="card-title mw30-text">2006 Toyota Innova 2.5 V Diesel 7-seater 2006 Toyota Innova 2.5 V Diesel 7-se</h4> <h5 class="card-text">Rs. 25.32 Lac*</h5> <ul class="list-inline"> <li class="list-inline-item">44,114 Km</li> <li class="list-inline-item">Petrol</li> <li class="list-inline-item">Gurugram</li> </ul> <button type="button" class="btn btn-outline-danger">Contact Sellers</button> </div> </div> </div> </div> </div> </div> </div> </div> </div>

img {width:100%;} .mw30-text {max-height: 30px; overflow: hidden;} .mh200-text { min-height: 200px; max-height:200px; overflow: hidden; } /******************* 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;