HTML markup
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<div class="ct-mainSlider ct-u-backgroundMotive"> <div class="ct-mainSlider--rightSide ct--col-md-push-7"> <div class="ct-js-slick ct-slick ct-slick-dots--type3 ct-slick-dots--rightBottom" data-adaptiveHeight="true" data-dots="true" data-arrows="false" data-infinite="true"> <div class="item"><!-- item [1] --> <img src="../assets/images/demo-content/hostel-1.jpg" alt="Hostel"/> </div> <div class="item"><!-- item [2] --> <img src="../assets/images/demo-content/hostel-1.jpg" alt="Hostel"/> </div> <div class="item"><!-- item [3] --> <img src="../assets/images/demo-content/hostel-1.jpg" alt="Hostel"/> </div> </div> </div> <div class="ct-mainSlider--leftSide ct--col-md-pull-5"> <div class="ct-mainSlider-miniImage hidden-xs"> <img src="../assets/images/demo-content/mini-hostel.jpg" alt=""/> </div> <div class="ct-bookingBox-fix ct-u-paddingTop30"> <div class="ct-bookingBox"> <div class="ct-bookingBox-inner"> <h2 class="ct-bookingBox-title ct-u-marginBottom30">Book a bed</h2> <div class="clearfix"></div> <form action="../assets/form/send.php" method="post" class="contactForm validateIt contactForm--type3" data-email-subject="Book a bed" data-show-errors="true"> <div class="form-group"> <select class="demo-default ct-js-selectize" name="hostel"> <option value="">Select a Hostel</option> <option value="1">The Sydney Harbour</option> <option value="2">Casa Caracol</option> <option value="3">The Clayzy House</option> <option value="4">RE B&B</option> <option value="5">CamelBackpackers</option> <option value="6">Fauzi Azar Inn</option> </select> </div> <div class="form-group"> <div class="ct-datePicker"> <input type="text" class="form-control ct-js-datePicker" placeholder="Select Date"> </div> </div> <div class="form-group"> <select class="demo-default ct-js-selectize"> <option value="">Number of Nights</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div> <div class="form-group"> <select class="demo-default ct-js-selectize"> <option value="">Currency</option> <option value="1">Dollar</option> <option value="2">Euro</option> <option value="3">Franc</option> <option value="6">Zloty</option> </select> </div> <div class="ct-u-paddingTop20"> <button type="submit" class="btn btn-link text-uppercase">Book now <span><i class="icon-right-small"></i></span></button> </div> </form> </div> </div> </div> </div> <div class="clearfix"></div> |
JavaScript
<script src=”../assets/js/slick/js/slick.js”></script>
<script src=”../assets/js/slick/js/init.js”></script>
<script src=”../assets/js/selectize/selectize.min.js”></script>
Screenshot
Main slider