I had to put my background-image CSS code for my header in my HTML because it didn't work in the CSS file alone for some reason but anyways Ive been trying all these different ways to make a slideshow but nothing is working can someone help guide me? Btw I have 4 Banner images that are all called banner1, banner2 ,banner3, banner4.jpg and are located in my IMAGES/banner1.jpg folder.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});body
{
background-color: #808080;
}
p
{
!--
}
p.homeclassheader
{
font-weight: bold;
font-size: 35px;
font-family: Tahoma, Geneva, sans-serif;
line-height: 150%;
text-align: center;
color: white;
text-shadow: 2px 2px 3px grey;
word-spacing: 3px;
letter-spacing: -1;
font-variant: small-caps;
}
header
{
text-align:center;
text-shadow: 2px 2px 3px grey;
color: silver;
padding: 20px 0px 0px 0px;
border-bottom: #808080;
position: fixed;
border-bottom: 2px solid #00FFF5;
top: -10;
height: 150px;
left: -10;
width: 105%;
z-index:5;
}
header a
{
text-decoration: none;
text-align:center;
text-shadow: 2px 2px 5px grey;
font-weight: bold;
font-size: 40px;
font-family: Tahoma, Geneva, sans-serif;
line-height: 100%;
color: white;
word-spacing: 3px;
letter-spacing: -1;
font-variant: small-caps;
}
hr {
border: 0;
height: 2px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
header a:visited
{
text-decoration: none;
text-align:center;
text-shadow: 2px 2px 3px grey;
color: silver;
}
article
{
}
article.homeclass
{
text-align:center;
color: silver;
padding: 0px 20px 0px 20px;
background-color: #393E46;
border-bottom: 2px solid #00FFF5;
border-top: 2px solid #00FFF5;
height: 350px;
float: left;
width: 75%;
max-width: 350px;
margin: 0 auto;
}
article.homeclass img
{
float: right;
margin-left: 30px;
margin-right: 25px;
margin-top: -15px;
margin-bottom: 0px;
}
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-weight: bold;
font-size: 15px;
font-family: "Comic Sans MS", cursive, sans-serif;
background-color: #393E46;
position: fixed;
top: 180;
width:99%;
z-index:5;
}
ul.menu li {
float: left;
}
ul.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-bottom: 2px solid #00FFF5;
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
ul.menu li a:hover {
background-color: #00ADB5;
color: black;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
a:visited
{
text-decoration: none;
}
a:link
a:focus
a:hover
a:active
footer a
{
text-decoration: none;
text-align:center;
color: #00FFF5;
}
footer
{
text-align:center;
color: silver;
background-color: #393E46;
padding: 10px 0px 0px 0px;
border-bottom: #808080;
position: absolute;
bottom: 0px;
height: 25px;
border-top: 2px solid #00FFF5;
width: 105%;
}<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="CSS/styles.css">
<TITLE>Las Vegas | Home</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="JAVASCRIPT/scrolleffect.js"></script>
</HEAD>
<BODY>
<HEADER>
<style>
header {
background-image: url("IMAGES/banner1.jpg");
}
</style>
<a name="top"><H1>Las Vegas</H1></A>
</HEADER>
<div id="home"></div>
<br>
<br><br><br><br><br><br><hr><br><br>
<br>
<ARTICLE class="homeclass">
<p class="homeclassheader">Accommodation</p>
<hr>
<p class="class2">Hotel 1</p>
<p class="class2">Hotel 2</p>
<p class="class2">Hotel 3</p>
<hr>
</ARTICLE>
<br><br><br><br><br><br>
<FOOTER>
<NAV>
All Copyright reserved to Dylan 2017 ©<br>
</NAV>
</FOOTER>
</BODY>
</HTML>
