带有箭头的 JQuery 图像滑块答案

【问题标题】：JQuery image slider with arrows带有箭头的 JQuery 图像滑块
【发布时间】：2021-03-20 16:37:26
【问题描述】：

我已经使用 HTML、CSS 和 JS (Jquery) 构建了一个基本的图像滑块。总共有 5 张图像，用户可以使用箭头在它们之间切换，到目前为止一切正常，但我希望右箭头在到达最后一张图像时消失，这就是我卡住的地方。问题是右箭头在我到达第二张图像后立即消失。关于如何解决这个问题的任何想法？提前致谢！

滑块的 IMG

我的问题的 IMG（当我到达第二张图片时，右箭头会立即消失，这应该只发生在最后一张图片上。）

这里是代码

$(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>

【问题讨论】：

这会复制您的代码 - ibb.co/WzCv1tT。请编辑您的代码，以便 sn-p 可以重现滑块，我会帮助您。
我试过编辑它，现在看起来怎么样？谢谢你通知我这件事。对我来说看起来还是一样，我会做一个 codepen sn-p。
没关系，它在任何地方都显示相同..尝试将代码添加到您的代码编辑器中，看看是否有任何作用

标签： html jquery css

【解决方案1】：

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

【讨论】：