So I was trying to create a image slider using the below code snippets, for a static website and was running it on VScodes Live Server and the Javascript didn't seem to apply to the page. pls help And I would like to add to add a simple fade and appear transition to the image slide as well, so pls answer this too ^_^
And pls don't answer with the bootstrap solution I looked it up and its not I m looking for :p
let images = ['camp1.png', 'camp2.png', 'camp3.png'];
let slide = document.getElementById('slider');
const slider = setTimeout(function(){
for( let i=0;i<=images.length;i ){
slide.src = images[i];
if (i == images.length){
i=0;
}
console.log(i);
}
}, 2000);
slide.addEventListener('load',slider);@import url('https://fonts.googleapis.com/css2?family=Exo 2:wght@100&family=Exo:ital,wght@1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@1,900&display=swap');
.about {
padding: 2rem 0rem;
}
.upper, .lower {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 2rem;
}
.logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#logo{
width: 70%;
}
.image {
background-image: url(scene.gif);
background-size: cover;
width: 36rem;
height: 28rem;
display: flex;
align-items: center;
border-radius: 50%;
border: 3px solid #000;
}
.camp {
position: relative;
top: 2.6rem;
left: 7.3rem;
}
#tent {
width: 30%;
}
#fire {
width: 15%;
position: relative;
top: 1rem;
right: 1rem;
}
.info{
width: 23%;
display: flex;
flex-direction: column;
text-align: center;
padding: 0rem 2rem 2rem 2rem;
margin-top: 4.5rem;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.info:hover{
transform: scale(1.1);
}
.info h1{
font-family: 'Exo', sans-serif;
font-size: 3rem;
font-weight: black 900;
}
.head1{
text-decoration: white;
}
.info p{
font-family: 'Exo 2', sans-serif;
font-size: 1.5rem;
font-weight: bold;
}
.slider{
display: flex;
align-items: center;
padding-top: 3.5rem;
}
.slider img{
width: 36rem;
height: 28rem;
border-radius: 50%;
border: 3px solid #000;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="about.css" />
<title>About Us</title>
</head>
<body>
<div class="about">
<!-- ------------------------------------ -->
<div class="upper">
<div class="logo">
<img src="logo.gif" alt="" id="logo" />
<div class="image">
<div class="camp">
<img src="tent.png" alt="" id="tent" />
<img src="fire.gif" alt="" id="fire" />
</div>
</div>
</div>
<div class="info">
<h1>ABOUT<br>YELPCAMP</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
</div>
<!-- ------------------------------------ -->
<div class="lower">
<div class="info">
<h1>ABOUT<br>OUR TEAM</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
<div class="slider">
<img src="camp1.png" alt="" id="slider"/>
</div>
</div>
<!-- ------------------------------------ -->
</div>
</body>
<script src="about.js"></script>
</html>So I was trying to create a image slider using the below code snippets, for a static website and was running it on VScodes Live Server and the Javascript didn't seem to apply to the page. pls help And I would like to add to add a simple fade and appear transition to the image slide as well, so pls answer this too ^_^
And pls don't answer with the bootstrap solution I looked it up and its not I m looking for :p
CodePudding user response：
I think you'd better use setInterval than setTimeout for an automatic slider :)
let images = ['https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/260px-PNG_transparency_demonstration_1.png', 'https://static4.depositphotos.com/1006994/298/v/950/depositphotos_2983099-stock-illustration-grunge-design.jpg', 'http://duduf.com/duf/wp-content/uploads/2015/08/Ducati_side_shadow.png'];
let slide = document.getElementById('slider');
const slider = () => {
let i = 0;
setInterval(
function() {
i = i < images.length - 1 ? i : 0;
slide.src = images[i];
console.log(i);
}, 2000);
}
slide.addEventListener('load', slider());<div class="lower">
<div class="info">
<h1>ABOUT<br>OUR TEAM</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
<div class="slidercont">
<img src="" alt="" id="slider" />
</div>
</div>