I've successfully developed an image slider using a combination of HTML, CSS, and JS (Jquery). The slider consists of 5 images that users can navigate between using arrow buttons. Everything is functioning correctly so far, but I'm encountering an issue with the right arrow button disappearing prematurely. Instead, I want it to disappear only once the last image has been reached. Any suggestions on how to resolve this problem would be greatly appreciated. Thank you in advance!
Image of the slider https://i.sstatic.net/pWFCN.png
Image illustrating my issue (the right arrow vanishes as soon as the second image is reached, whereas it should only happen when reaching the final image). https://i.sstatic.net/RbZS6.jpg
Provided below is the code snippet
$(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>Custom Responsive Website</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">Interesting Things You Can Create with JS and 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 Do 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>