Tour Hero Test

HTML
<div id="hero"> <div id="menu"> <ul> <li>About Us</li> <li>Our Tours</li> <li>Contact</li> <li>Gift Shop</li> </ul> </div> <img id="tour-logo" src="https://www.tivbranding.com/wp-content/themes/tivbranding/images/calistoga-test/han008_logo-frame-1.svg"/> <div id="slider"> <img src="https://www.tivbranding.com/wp-content/themes/tivbranding/images/calistoga-test/han008_calistoga_wine_tours_HOME-1.jpg"/> <img src="https://www.tivbranding.com/wp-content/themes/tivbranding/images/calistoga-test/han008_calistoga_wine_tours_HOME-2.jpg"/> <img src="https://www.tivbranding.com/wp-content/themes/tivbranding/images/calistoga-test/han008_calistoga_wine_tours_HOME-3.jpg"/> </div> <div id="lower-content"> <div class="copy">EXPERIENCE WINE COUNTRY FROM THE<br/>PEOPLE WHO KNOW IT THE BEST</div> <div class="button">BOOK TODAY!</div> <div class="slider-dots"> <div class="dot dot1 active"></div> <div class="dot dot2"></div> <div class="dot dot3"></div> </div> <div class="down-arrow fas fa-chevron-down"></div> </div> </div>
CSS
#hero { position: relative; height: 60vw; max-height: 100vh ; text-align: center; display: flex; justify-content: center; background-color: #333; } #tour-logo, #hero img{ position: absolute; top: 0; left: 50%; height: 100%; } #hero #tour-logo { z-index: +1; } #menu{ position: absolute; z-index: 1000; color: #fff; } #menu ul{ list-style: none; padding: 0; display: flex; } #menu li { padding: 0 20px; text-transform: uppercase; } #lower-content{ position: absolute; bottom: 0; z-index: 1000; width: 100%; color: #fff; } .copy { font-size: 2em; margin-bottom: 1em; } .button { border: 1px solid #fff; width: auto; max-width: 175px; margin: 0 auto 30px; padding: 1em; background-color: #00000059; } .slider-dots { width: 100%; height: 15px; display: flex; justify-content: center; margin-bottom: 10px; } .dot { border: 1.5px solid #fff; width: 8px; height: 8px; border-radius: 50%; margin: 0 3px; transition: all 1s; } .dot.active { background-color: #fff; } .down-arrow { font-size: 1.5em; margin: 5px 0; }
JAVASCRIPT
jQuery(document).ready(function(){ jQuery("#slider > img:gt(0)").hide(); setInterval(function() { jQuery('#slider > img:first') .fadeOut(2000) .next() .fadeIn(2000) .end() .appendTo('#slider'); }, 10000); var $liCollection = $(".slider-dots div"); var $firstListItem = $liCollection.first(); $liCollection.first().addClass("active"); setInterval(function() { var $activeListItem = $(".active") $activeListItem.removeClass("active"); var $nextListItem = $activeListItem.closest('div').next(); if ($nextListItem.length == 0) { $nextListItem = $firstListItem; } $nextListItem.addClass("active"); }, 10450); }); // Bind to the resize event of the window object $(window).on("resize", function () { // Set .right's width to the window width minus 480 pixels width = $("#slider img").width(); offset = -(width / 2); console.log(width); $('#hero img').css('margin-left',offset); // Invoke the resize event immediately }).resize();
Expand for more options Login