JavaScript Image Carousel Issue with First and Last Image

[Johna]

I've been trying to make an image carousel for quite a while not, I've finally got somewhere, but there's still one issue. When the carousel moves to the next image, rather that the last image sliding in, it just appears. Same with going to previous Image, but then it's the first image.

I know why it's doing that, I just want to know how do it so it doesn't do that.


Here's my code:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="style.css">

<div class="slider-outer">
  <div class="container">
      
    <!--Slider images-->
    <div class="slider-wrapper">
      <div class="inner-wrapper">
        <div class="slide"><img src="../images/SPRING.png" alt="Spring"></div>
        <div class="slide"><img src="../images/ALBUMS.png" alt="Albums"></div>
        <div class="slide"><img src="../images/HIRE.png" alt="Hire Me"></div>
        <div class="slide"><img src="../images/BN.png" alt="Burn Notice"></div>
        <div class="slide"><img src="../images/SG.png" alt="Stargirl"></div>
      </div>
    </div>
      
    <!--Slider buttons-->
    <div class="button prev"><img src="../images/LA.png" alt="Previous image"></div>
    <div class="button next"><img src="../images/RA.png" alt="Next image"></div>
  </div>
</div>

<script src="script.js" charset="utf-8"></script>

.slider-outer {
  height: 468px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.container {
  max-width: 5000px;
  height: 468px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}


.slider-wrapper {
  width: 5000px;
  height: 468px;
  overflow: hidden;
}

.inner-wrapper {
  width: 5000px;
  height: 468px;
  position: relative;
  left: 0px;
}

.slide {
  width: 1000px;
  height: 468px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
}

.button {
  width: 22px;
  height: 40px;
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}

.button img {
  user-select: none;
}

.button img:hover {
  margin-top: -40px;
}

.prev {
  right: calc(50% + 540px);
}

.next {
  left: calc(50% + 540px);
}

$(function() {
  var inWrap = $('.inner-wrapper'),
      $slide = $('.slide');

  function nextImage() {
    inWrap.animate({'left': '-1000px'}, 200, function() {
      inWrap.css('left', '0px');
      $('.slide').last().after($('.slide').first());
    });
  };

  sliderInterval = setInterval(nextImage, 7000);

  $(".container").hover(function(){
    clearInterval(sliderInterval);
  }, function(){
    sliderInterval = setInterval(nextImage, 7000);
  });

  $('.prev').on('click', function() {
    inWrap.animate({'left': '1000px'}, 200, function() {
      inWrap.css('left', '0px');
      $('.slide').first().before($('.slide').last());
    });
  });

  $('.next').on('click', function() {
    nextImage();
  });
});

Thanks.

 

[Broth3rz]

I have this issue also. Would be nice if we got help with it.