<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/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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-12"> <div class="product-title"> <h3>Ford Endeavour Top Class 2012</h3> <h5><i class="fa fa-map-marker"></i> Karali, Mahendru, New Delhi-110085</h5> <hr> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://images.pexels.com/photos/249581/pexels-photo-249581.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://images.pexels.com/photos/861034/pexels-photo-861034.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="https://images.pexels.com/photos/50908/pexels-photo-50908.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"> </div> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination swiper-pagination-white"></div> <!-- Add Navigation --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <div class="col-md-4"> <div class="product-widget "> <ul class="list-group"> <li class="list-group-item"> <span class="badge">1 Day </span> Auction Ends in</li> <li class="list-group-item"> <span class="badge">2012</span> Manufacture Year </li> <li class="list-group-item"> <span class="badge">Diesel </span> Fuel Type </li> <li class="list-group-item"> <span class="badge">N/A</span>Permit</li> <li class="list-group-item"> <span class="badge">One</span>Owner</li> <li class="list-group-item"> <span class="badge">Silver</span> Color </li> <li class="list-group-item"> <span class="badge">No</span> Superdari </li> <li class="list-group-item"> <span class="badge">Yes, Available</span>RC Status</li> <li class="list-group-item"> <span class="badge">N/A</span> Tax Validity</li> <li class="list-group-item"> <span class="badge">N/A</span>Fitness Validity </li> <li class="list-group-item"> <span class="badge">N/A</span>Permit Validity </li> </ul> </div> <div class="product-auction-form"> <form class="form-inline" action="/action_page.php"> <div class="radiobtn"> <label class="radio-inline"> <input type="radio" name="optradio">With RC </label> </div> <div class="form-group"> <input id="" name="" type="text" placeholder="Amount" class="form-control input-md" required=""> </div> <button type="submit" class="btn btn-danger">BID NOW</button> </form> </div> </div> </div> <hr> </div> <div class="container product-detail-area"> <div class="row"> <div class="col-md-8"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> Complete Description</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body"> <ul> <li>No body parts have been repaired</li> <li>Buyer needs to deposit money within 4 days</li> <li>Buyer is advised to inspect the vehicle physically</li> <li>Gaadiexpert is not responsible for any kinds of parts damaged or missing.</li> <li>Gaadiexpert with assist you in their limits.</li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> My Bid Details</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body"> <table class="table table-hover"> <thead> <tr> <th>Bid Date & Time</th> <th>Bid Amount</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>25/01/2018</td> <td>260000</td> <td>Winning</td> </tr> <tr> <td>25/01/2018</td> <td>260000</td> <td>Winning</td> </tr> <tr> <td>25/01/2018</td> <td>260000</td> <td>Winning</td> </tr> </tbody> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"> Must Know Info</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body"> <ul> <li>No body parts have been repaired</li> <li>Buyer needs to deposit money within 4 days</li> <li>Buyer is advised to inspect the vehicle physically</li> <li>Gaadiexpert is not responsible for any kinds of parts damaged or missing.</li> <li>Gaadiexpert with assist you in their limits.</li> </ul> </div> </div> </div> </div> </div> <div class="col-md-4"> <h4>Customer Service : 011-45063800</h4> </div> </div> </div>

.swiper-container { width: 100%; height: 100%; } .swiper-slide { overflow: hidden; } /*** Add for CSS & Js in html head and js section **/ <link rel="stylesheet" href="css/swiper.min.css"> <!-- Swiper JS --> <script src="js/swiper.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { zoom: true, pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev' }); </script>