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();
