Why My Javascript Slideshow Doesnt Work Properly
Guys I was studying brad traverst this javascript slideshow. And mine is not working but I couldnt understand where I made mistake. Probably the error is in my javascript codes. My
Solution 1:
document.querySelector('current') will be document.querySelector('.current') at
function nextslide(){
const current = document.querySelector('current');
}
and
.slider{
position:relative;
overflow:hidden;
height:100%;
width:100%;
}
will be
.slider{
position:relative;
overflow:hidden;
height: 100vh;
width: 100vw;
}
const slides = document.querySelectorAll(".slide");
const next = document.querySelector("#next");
const prev = document.querySelector("#prev");
const auto = true;
const invervalTime = 5000;
let slideInterval;
function nextslide(){
//Get current class
const current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for next slide
if(current.nextElementSibling){
//Add current to nextElementSibling
current.nextElementSibling.classList.add('current');
}else{
//Add current to start
slides[0].classList.add('current');
}
setTimeout(() => current.classList.remove('current'));
}
function prevslide(){
//Get current class
const current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for previous slide
if(current.previousElementSibling){
//Add current to previousElementSibling
current.previousElementSibling.classList.add('current');
}else{
//Add current to last
slides[slides.length - 1].classList.add('current')
}
setTimeout(() => current.classList.remove('current'));
}
//button events
next.addEventListener('click', e =>{
nextslide();
if(auto){
clearInterval(slideInterval)
slideInterval = setInterval(nextslide, invervalTime);
}
});
prev.addEventListener('click', e =>{
prevslide();
if(auto){
clearInterval(slideInterval)
slideInterval = setInterval(nextslide, invervalTime);
}
});
//autoplay
if(auto){
slideInterval = setInterval(nextslide, invervalTime);
}
.slider{
position:relative;
overflow:hidden;
height: 100vh;
width: 100vw;
}
.slide{
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
opacity:0;
transition: opacity 0.4s ease-in-out;
}
.slide.current{
opacity:1;
}
.slide.current .content{
opacity: 1;
left:0;
transition: all 0.7s ease-in-out 0.3s;
}
.content{
position: absolute;
bottom: 70px;
left:-600px;
opacity:0;
width:600px;
background-color: rgb(255, 255, 255, 0.8);
color: #333333;
padding:35px;
}
.content h1{
margin-bottom: 10px;
}
#next{
position:absolute;
top:200px;
right:15px;
}
#prev{
position:absolute;
top:200px;
left:15px;
}
.buttons{
border: 2px solid #ffffff;
background-color: transparent;
color:#ffffff;
cursor:pointer;
padding: 13px 15px;
border-radius: 50%;
outline: none;
transition: 1.5s;
}
.buttons:hover{
background-color: white;
color:black;
transition: 1.5s;
}
@media (max-width: 800px) {
.slide .content{
bottom:-300px;
left:0;
width:100%;
}
.slide.current .content{
transform: translateY(-300px);
}
}
.slide:first-child{
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(2){
background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(3){
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(4){
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(5){
background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}<div class="slider">
<div id="firstcontent"class="slide current">
<div class="content">
<h1>Slide One</h1>
<p>Slide One's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Two</h1>
<p>Slide Two's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Third</h1>
<p>Slide Third's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Four</h1>
<p>Slide Four's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Five</h1>
<p>Slide Five's paraghrap</p>
</div>
</div>
</div>
<div class="button">
<button class="buttons"id="prev"><i class="fa fa-arrow-left"></i></button>
<button class="buttons"id="next"><i class="fa fa-arrow-right"></i></button>
</div>Solution 2:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
document.getElementById("navs").style.transition = "2s";
document.getElementById("navs").style.height = "20%";
document.getElementById("sag2").style.transition = "2s";
document.getElementById("sag2").style.marginLeft = "20%";
document.getElementById("navs").style.backgroundColor = "white";
document.getElementById("sol").style.transition = "2s";
document.getElementById("sol").style.marginLeft = "40%";
//document.getElementById("sag2").style.left = "20%";
}else{
document.getElementById("navs").style.height = "15%";
document.getElementById("sag2").style.transition = "2s";
document.getElementById("sag2").style.marginLeft = "0%";
document.getElementById("navs").style.backgroundColor = "transparent";
document.getElementById("sol").style.transition = "2s";
document.getElementById("sol").style.marginLeft = "70%";
}
}
const slides = document.querySelectorAll(".slide");
const next = document.querySelector("#next");
const prev = document.querySelector("#prev");
const auto = true;
const invervalTime = 5000;
let slideInterval;
function nextslide(){
//Get current class
const current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for next slide
if(current.nextElementSibling){
//Add current to nextElementSibling
current.nextElementSibling.classList.add('current');
}else{
//Add current to start
slides[0].classList.add('current');
}
setTimeout(() => current.classList.remove('current'));
}
function prevslide(){
//Get current class
const current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for previous slide
if(current.previousElementSibling){
//Add current to previousElementSibling
current.previousElementSibling.classList.add('current');
}else{
//Add current to last
slides[slides.length - 1].classList.add('current')
}
setTimeout(() => current.classList.remove('current'));
}
//button events
next.addEventListener('click', e =>{
nextslide();
if(auto){
clearInterval(slideInterval)
slideInterval = setInterval(nextslide, invervalTime);
}
});
prev.addEventListener('click', e =>{
prevslide();
if(auto){
clearInterval(slideInterval)
slideInterval = setInterval(nextslide, invervalTime);
}
});
//autoplay
if(auto){
slideInterval = setInterval(nextslide, invervalTime);
}
.nav{
width: 100%;
position: fixed;;
left: 0;
height:15%;
top:0px;
font-size:15px;
z-index:1000;
}
.a{
position: relative;
top:70%;
font-size: 20px;
text-decoration: none;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color:rgb(90, 76, 76);
}
.a:hover{
text-decoration: none;
border-bottom: 2px red solid;
color:rgb(129, 74, 129);
}
#aiki{
margin:3%;
}
#auc{
border-right: 30px solid transparent;
}
#adort{
border-left: 10px solid transparent;
}
#abir{
margin:3%;
}
.sag2{
position: absolute;
}
.sol{
position: absolute;
top:-5%;
margin-left:70%;
}
.as{
position: relative;
top:70%;
font-size: 20px;
text-decoration: none;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-left:15%;
color:white;
}
.a:hover{
text-decoration: none;
color:rgb(129, 74, 129);
}
.img1{
background-color: rgb(155, 151, 151);
position: absolute;
width: 100%;
height: 25%;
}
@media (max-width: 1000px) {
.a{
display: none;
}
}
#span{
color:white;
margin: 5%;
}
.slider{
position:relative;
overflow:hidden;
height: 100vh;
width: 100vw;
}
.slide{
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
opacity:0;
transition: opacity 0.4s ease-in-out;
}
.slide.current{
opacity:1;
}
.slide.current .content{
opacity: 1;
left:0;
transition: all 0.7s ease-in-out 0.3s;
}
.content{
position: absolute;
bottom: 70px;
left:-600px;
opacity:0;
width:600px;
background-color: rgb(255, 255, 255, 0.8);
color: #333333;
padding:35px;
}
.content h1{
margin-bottom: 10px;
}
#next{
position:absolute;
top:200px;
right:15px;
}
#prev{
position:absolute;
top:200px;
left:15px;
}
.buttons{
border: 2px solid #ffffff;
background-color: transparent;
color:#ffffff;
cursor:pointer;
padding: 13px 15px;
border-radius: 50%;
outline: none;
transition: 1.5s;
}
.buttons:hover{
background-color: white;
color:black;
transition: 1.5s;
}
@media (max-width: 800px) {
.slide .content{
bottom:-300px;
left:0;
width:100%;
}
.slide.current .content{
transform: translateY(-300px);
}
}
.slide:first-child{
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(2){
background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(3){
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(4){
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(5){
background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
} <nav class="nav" id="navs">
<nav class="img1" id="imgg" ><span id="span">0 533 295 42 35</span><span id="span">blabla@gmail.com</span></nav>
<div class="as">
<div class="sag" id="sag2">
<a class="a" id="abir">sad</a>
<a class="a" id="aiki">sad</a>
</div>
<div class="sol" id="sol">
<a class="a" id="auc">sad</a>
<a class="a" id="adort">sad</a>
</div>
</div>
</nav>
<div class="slider">
<div id="firstcontent"class="slide current">
<div class="content">
<h1>Slide One</h1>
<p>Slide One's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Two</h1>
<p>Slide Two's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Third</h1>
<p>Slide Third's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Four</h1>
<p>Slide Four's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Five</h1>
<p>Slide Five's paraghrap</p>
</div>
</div>
</div>
<div class="button">
<button class="buttons"id="prev"><i class="fa fa-arrow-left"></i></button>
<button class="buttons"id="next"><i class="fa fa-arrow-right"></i></button>
</div>
<div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
<div>sss</div>
<div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
<div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
<div>sss</div>
<div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
<div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
<div>sss</div>
<div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
<div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
<div>sss</div>
<div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div><div>sss</div>
<div>sss</div><div>sss</div><div>sss</div><div>sss</div>
</body>
</html>
Post a Comment for "Why My Javascript Slideshow Doesnt Work Properly"