CODEWITHSUNDEEP
htmljquerycss
Mitrixsen
Mitrixsen

Reputation: 323

JQuery image slider with arrows

I've built a basic image slider using HTML, CSS, and JS (Jquery). There are 5 images in total and users can switch between them using arrows, everything works fine so far but I want the right arrow to disappear if it reaches the last image and that's where I get stuck. The problem is that the right arrow disappears right after I reach the second image. Any idea on how to fix that? Thanks in advance!

IMG of the slider enter image description here

IMG of my problem (the right arrow disappears immediately when I reach the second image, that's supposed to happen only with the last image.) enter image description here

Here is the code

$(document).ready(function() {
    $('.next').on('click',function(event) {
        var images = $('.slider-inner').find('img');
        var currentImg = $('.active')
        var nextImg = currentImg.next();
        var lastImg = images.last();
        var rightArrow = $('.next');

        images.not(':first').hide();

        if (nextImg.length) {
            currentImg.removeClass('active');
            nextImg.addClass('active');
            nextImg.fadeIn();
        }
        
        if (lastImg.length) {
            rightArrow.hide();
        }
       
        event.preventDefault();
    });

    $('.prev').on('click',function() {
        var currentImg = $('.active')
        var prevImg = currentImg.prev();

        if (prevImg.length) {
            currentImg.removeClass('active');
            prevImg.addClass('active');
        }
        

        
    });
});
*,*::before,*::after {box-sizing: border-box;}

body {
    background-image: url("../images/bg.png");
    background-size: 100%;
    font-size: 100%;
    font-family: "Roboto",sans-serif;
    color: white;
    
}

.container {
    max-width: 1250px;
    margin: 0 auto;
    overflow: auto;
}


img {
    max-width: 100%;
    height: auto;
}


a {
    color: #fff;
    text-decoration: none;
}



.slider-inner {
    margin: 0 auto;
    max-width: 1200px;
    max-height: 675px;
    position: relative;
    overflow: hidden;
    float: left;
    padding: 0.1875em;
    border: black solid 7px;
}

.slider-inner img {
    display: none;
    
}

.slider-inner img.active {
    display: inline-block;
}

.prev, .next {
    margin-top: 18.75em;
    float: left;
    cursor: pointer;
}


.prev {
    z-index: 100;
    margin-right: -2.8125em;
    position: relative;
    
}


.next {
    margin-left: -2.8125em;
    z-index: 100;
    position: relative;
}



.nadpis {
    font-weight: 400;
    text-align: center;
}

.podnadpis {
    text-align: center;
    font-weight: 100;
    font-size: 3em;
    margin-top: 2em;
}

.img-slider {
    text-align: center;
}
<!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">
    <title>Vlastna responzivna stranka</title>
    <link rel="stylesheet" href="css/styles2.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="nadpis">Take zaujimave veci, ktore sa daju spravit s JS a JQuery</h1>
        <h2 class="podnadpis">Image Slider</h2>
        <div class="slider-outer">
            <img src="img-slider/arrow-left.png" alt="left arrow" class="prev">
            <div class="slider-inner">
                <img src="img-slider/john-jpg.jpg" class="active" alt="A game character witha quote saying Dont you kids watch horror movies?, you never, ever, split up.">
                <img src="img-slider/butterflies-jpg.jpg" alt="A game character looking at an enthogy">
                <img src="img-slider/andrew-jpg.jpg" alt="Three characters, one from the future, one from the present and one from the past">
                <img src="img-slider/taylor-jpg.jpg" alt="Three characters, one from the future, one from the present and one from the past"">
                <img src="img-slider/vince-.jpg.jpg" alt="A bar with a guy sitting there">
                <img src="img-slider/conrad.jpg" alt="Conrad">
            </div>
            <img src="img-slider/arrow-right.png" alt="next arrow" class="next">
        </div>
    </div>
    

    <script src="javascript/jquery.js"></script>
    <script src="javascript/main.js"></script>
</body>
</html>

Upvotes: 0

Views: 958

Answers (1)

Mahmoud Nashat
Mahmoud Nashat

Reputation: 26

if (lastImg.hasClass("active")) {
         rightArrow.hide();
}

Upvotes: 1

Related Questions