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

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

    functionnextslide(){
        //Get current classconst current = document.querySelector('.current');
        //Remove current class
        current.classList.remove('current')
        //Check for next slideif(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'));
    }
    
    functionprevslide(){
        //Get current classconst current = document.querySelector('.current');
        //Remove current class
        current.classList.remove('current')
        //Check for previous slideif(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);
    }
    });

    //autoplayif(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;
     }
     .contenth1{
        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: 13px15px;
        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;
     }

<divclass="slider"><divid="firstcontent"class="slide current"><divclass="content"><h1>Slide One</h1><p>Slide One's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Two</h1><p>Slide Two's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Third</h1><p>Slide Third's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Four</h1><p>Slide Four's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Five</h1><p>Slide Five's paraghrap</p></div></div></div><divclass="button"><buttonclass="buttons"id="prev"><iclass="fa fa-arrow-left"></i></button><buttonclass="buttons"id="next"><iclass="fa fa-arrow-right"></i></button></div>

Solution 2:

window.onscroll = function() {scrollFunction()};

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

        functionnextslide(){
            //Get current classconst current = document.querySelector('.current');
            //Remove current class
            current.classList.remove('current')
            //Check for next slideif(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'));
        }
        
        functionprevslide(){
            //Get current classconst current = document.querySelector('.current');
            //Remove current class
            current.classList.remove('current')
            //Check for previous slideif(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);
        }
        });

        //autoplayif(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;
 }
 .contenth1{
    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: 13px15px;
    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;
 }

<navclass="nav"id="navs"><navclass="img1"id="imgg" ><spanid="span">0 533 295 42 35</span><spanid="span">blabla@gmail.com</span></nav><divclass="as"><divclass="sag"id="sag2"><aclass="a"id="abir">sad</a><aclass="a"id="aiki">sad</a></div><divclass="sol"id="sol"><aclass="a"id="auc">sad</a><aclass="a"id="adort">sad</a></div></div></nav><divclass="slider"><divid="firstcontent"class="slide current"><divclass="content"><h1>Slide One</h1><p>Slide One's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Two</h1><p>Slide Two's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Third</h1><p>Slide Third's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Four</h1><p>Slide Four's paraghrap</p></div></div><divclass="slide"><divclass="content"><h1>Slide Five</h1><p>Slide Five's paraghrap</p></div></div></div><divclass="button"><buttonclass="buttons"id="prev"><iclass="fa fa-arrow-left"></i></button><buttonclass="buttons"id="next"><iclass="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>