How to check the end of a next() with jquery?

Question

I'm pretty new to programming and I'm currently working on the concept of a photo slider where when the user clicks the next arrow, the image source changes to the next image source from my list of li tags. However, I got to the end of my list and I wish to have the same image source if the current image source is the same and hasn't changed. I feel as if I'm really close! Thanks!

My HTML:

   <div id="wrapper">
    <div class="left-arrow">
      <i class="arrow left"></i>
    </div>
    <div class="image-holder"></div>
    <div class="right-arrow">
      <i class="arrow right"></i>
    </div>
  </div>

My JavaScript/JQuery:

$(document).ready(function() {
  // global variables
  var $firstImg = $('.firstImg').attr('src');
  var $lastImg = $('.lastImg').attr('src');
  // get image src of the li with the class "active"
  var $imageSrc = $('li.active>img').attr('src');
  // append the image src of active into the div with class "image-holder"
  $('.image-holder').append("<img src='" + $imageSrc + "'" + " class='placeImg'>");
  // change src of image when user clicks the right arrow
  $('.right').on('click', function() {
    if ($('li.active').next().length > 3)) {
      var $next = $('li.active').next();
      var $nextSrc = $next.children('img').attr('src');
        $('.placeImg').removeAttr('src');
        $('.placeImg').attr('src', $nextSrc);
        if ($('li').hasClass('active')) {
          $('li').removeClass('active');
        }
      $next.addClass('active');

    } else {
      $('.placeImg').attr('src', $lastImg);
    }
  });
  // change src of image when user clicks the left arrow
  $('.left').on('click', function() {
    var $prev = $('li.active').prev();
    var $prevSrc = $prev.children('img').attr('src');
      $('.placeImg').removeAttr('src');
      $('.placeImg').attr('src', $prevSrc);
      if ($('li').hasClass('active')) {
        $('li').removeClass('active');
      }
    $prev.addClass('active');
  });
});

Answer 1

I figured it out myself! Here's the new code!

My HTML:

<ul class="images">
    <li class="active"><img src="images/htmllogolg.png" alt="html" class="firstImg"></li>
    <li><img src="images/csslogolg.png" alt="css"></li>
    <li><img src="images/jslogolg.png" alt="js" class="lastImg"></li>
  </ul>


  <div id="wrapper">
    <div class="left-arrow">
      <i class="arrow left"></i>
    </div>
    <div class="image-holder"></div>
    <div class="right-arrow">
      <i class="arrow right"></i>
    </div>
  </div>

My JavaScript:

$(document).ready(function() {
  // global variables
  var $firstImg = $('.firstImg').attr('src');
  var $lastImg = $('.lastImg').attr('src');
  // get image src of the li with the class "active"
  var $imageSrc = $('li.active>img').attr('src');
  // append the image src of active into the div with class "image-holder"
  $('.image-holder').append("<img src='" + $imageSrc + "'" + " class='placeImg'>");
  // change src of image when user clicks the right arrow
  $('.right').on('click', function() {
    var $next = $('li.active').next();
    var $nextSrc = $next.children('img').attr('src');

    if ($('.placeImg').attr('src') == $lastImg) {
      $('.placeImg').attr('src', $lastImg);
    } else {
      $('.placeImg').removeAttr('src');
      $('.placeImg').attr('src', $nextSrc);
      if ($('li').hasClass('active')) {
        $('li').removeClass('active');
      }
    $next.addClass('active');
    }
  });
  // change src of image when user clicks the left arrow
  $('.left').on('click', function() {
    var $prev = $('li.active').prev();
    var $prevSrc = $prev.children('img').attr('src');

    if ($('.placeImg').attr('src') == $firstImg) {
      $('.placeImg').attr('src', $firstImg);
    } else {
      $('.placeImg').removeAttr('src');
      $('.placeImg').attr('src', $prevSrc);
      if ($('li').hasClass('active')) {
        $('li').removeClass('active');
      }
    $prev.addClass('active');
    }
  });
});