stop scrolling once last li is visible on screen

Question

I have a set of images that is aligned in a single row and overflow:hidden. I have 2 buttons, Left and Right, which when clicked scrolls the div to their opposite sides. The problem I am facing here is even after the last element is visible on the screen the scroll goes on to some extent and then stops, creating aspect for blank space in the screen. How can I prevent this? Here is the Fullscreen result and Fiddle and code below:

$(document).ready(function() {
  //Video Slider begins
  var totalWidth = 0;

  $(".gallery__item").each(function() {
    totalWidth = totalWidth + $(this).outerWidth(true) + 100;
  });

  var maxScrollPosition = totalWidth - 100 - $(".gallery-wrap").outerWidth();

  function toGalleryItem($targetItem) {
    if ($targetItem.length) {
      var newPosition = $targetItem.position().left;
      if (newPosition <= maxScrollPosition - 100) {
        $targetItem.addClass("vid-item-active");
        $targetItem.siblings().removeClass("vid-item-active");
        $(".gallery").animate({
          left: -(newPosition)
        });
      } else {
        $(".gallery").animate({
          left: -(maxScrollPosition)
        });
      };
    };
  };
  $(".des-style").width("100%");
  $(".gallery").width(totalWidth);

  $(".vid-item:first").addClass("vid-item-active");

  // When the prev button is clicked
  // ====================================================================
  $(".gallery__controls-prev").on("click", function() {
    var $targetItem = $(".vid-item-active").prev();
    toGalleryItem($targetItem);
  });
  // When the next button is clicked
  // ====================================================================
  $(".gallery__controls-next").on("click", function() {
    var $targetItem = $(".vid-item-active").next();
    toGalleryItem($targetItem);
  });
});

.gallery-wrap {
  margin: 0 auto;
  overflow: hidden;
}
.services-wrap {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  margin: 0 0 40px;
  margin-top: 15px !important;
  box-shadow: 5px 5px 5px gray;
  max-height: 220px !important;
  min-height: 220px !important;
}
.gallery {
  position: relative;
  left: 0px;
  top: 0px;
}
.gallery__item {
  float: left;
  list-style: outside none none;
  margin-right: 20px;
  width: 200px;
}
.stay-fixed {
  position: absolute;
  z-index: 20;
}
.gallery__controls-prev {
  cursor: pointer;
  float: left;
}
.gallery__controls-next {
  cursor: pointer;
  float: right;
}
.gallery__controls-prev img,
.gallery__controls-next img {
  width: 28px;
  height: 28px;
}
.left {
  transform: rotate(-180deg);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="gallery-wrap">
  <div class="gallery clearfix">
    <ul>
      <li class="gallery__item vid-item vid-item-active">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="vjEehv6_3b0" data-desc="A Glimpse of Tiger dance by Team MCB">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Chrysanthemum.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="co9iVzVTQIQ" data-desc="Marpalli Chande seve in Tirupathi Sri Govindaraja Swami Temple.">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Desert.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="qtrEg7plreY" data-desc="Outside Chande Program ">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Hydrangeas.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="KW95id4p-9Q" data-desc="Bannanje Competition">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Jellyfish.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="MAqH4vq4fGM" data-desc="Hulivesha by our Team">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Koala.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="WHBMONzvdHY" data-desc="Rashi Pooje at Marpalli Temple">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Lighthouse.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="Jp_lu1KaAf0" data-desc="Uppoor Chande">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Penguins.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="4wnAaX7LNKc" data-desc="Marpalli Akhanda Chande Seve - part[2]">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled.png">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="rZorz5vYk10" data-desc="Akhanda Chande Seve at Marpalli Mahalingeshwara Chande Balaga - part[1]">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled1.png">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="bE6i8HsJbt4" data-desc="Chande seve at Udupi Sri Krishna Temple">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled2.png">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
    </ul>
  </div>
  <div class="gallery__controls row clearfix stay-fixed col-md-6 col-md-offset-3 col-xs-12">
    <div class="gallery__controls-prev">
      <img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png" class="left">
    </div>
    <div class="gallery__controls-next">
      <img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png">
    </div>
  </div>
</div>

Answer 1

Please check i have added snippet.

Demo Link

$(document).ready(function() {
  //Video Slider begins
  var totalWidth = 0;
  var mainDivWidth = $(".gallery").outerWidth();
  $(".gallery__item").each(function() {
    debugger;
    totalWidth = totalWidth + $(this).outerWidth(true) + 12;
  });

  var maxScrollPosition = totalWidth - 100 - $(".gallery-wrap").outerWidth();

  function toGalleryItem($targetItem) {
    if ($targetItem.length) {

      var newPosition = $targetItem.position().left;
      debugger;
      if (totalWidth < newPosition + mainDivWidth) {
        return false;
      }
      if (newPosition <= maxScrollPosition - 100) {
        $targetItem.addClass("vid-item-active");
        $targetItem.siblings().removeClass("vid-item-active");
        $(".gallery").animate({
          left: -(newPosition)
        });
      } else {
        $(".gallery").animate({
          left: -(maxScrollPosition)
        });
      };
    };
  };
  $(".des-style").width("100%");
  $(".gallery").width(totalWidth);
  //$(".gallery").css("left", "-40px");
  // Basic HTML manipulation
  // ====================================================================
  // Set the gallery width to the totalWidth. This allows all items to
  // be on one line.

  $(".vid-item:first").addClass("vid-item-active");

  // When the prev button is clicked
  // ====================================================================
  $(".gallery__controls-prev").on("click", function() {
    var $targetItem = $(".vid-item-active").prev();
    toGalleryItem($targetItem);
  });
  // When the next button is clicked
  // ====================================================================
  $(".gallery__controls-next").on("click", function() {
    var $targetItem = $(".vid-item-active").next();
    toGalleryItem($targetItem);
  });
});

.gallery-wrap {
  margin: 0 auto;
  overflow: hidden;
}
.services-wrap {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  margin: 0 0 40px;
  margin-top: 15px !important;
  box-shadow: 5px 5px 5px gray;
  max-height: 220px !important;
  min-height: 220px !important;
}
.gallery {
  position: relative;
  left: 0px;
  top: 0px;
}
.gallery__item {
  float: left;
  list-style: outside none none;
  margin-right: 20px;
  width: 200px;
}
.stay-fixed {
  position: absolute;
  z-index: 20;
}
.gallery__controls-prev {
  cursor: pointer;
  float: left;
}
.gallery__controls-next {
  cursor: pointer;
  float: right;
}
.gallery__controls-prev img,
.gallery__controls-next img {
  width: 28px;
  height: 28px;
}
.left {
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-wrap">
  <div class="gallery clearfix">
    <ul>
      <li class="gallery__item vid-item vid-item-active">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="vjEehv6_3b0" data-desc="A Glimpse of Tiger dance by Team MCB">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Chrysanthemum.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="co9iVzVTQIQ" data-desc="Marpalli Chande seve in Tirupathi Sri Govindaraja Swami Temple.">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Desert.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="qtrEg7plreY" data-desc="Outside Chande Program ">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Hydrangeas.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="KW95id4p-9Q" data-desc="Bannanje Competition">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Jellyfish.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="MAqH4vq4fGM" data-desc="Hulivesha by our Team">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Koala.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="WHBMONzvdHY" data-desc="Rashi Pooje at Marpalli Temple">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Lighthouse.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="Jp_lu1KaAf0" data-desc="Uppoor Chande">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Penguins.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="4wnAaX7LNKc" data-desc="Marpalli Akhanda Chande Seve - part[2]">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled.png">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="rZorz5vYk10" data-desc="Akhanda Chande Seve at Marpalli Mahalingeshwara Chande Balaga - part[1]">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled1.png">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="bE6i8HsJbt4" data-desc="Chande seve at Udupi Sri Krishna Temple">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled2.png">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
    </ul>

  </div>
  <div class="gallery__controls row clearfix stay-fixed col-md-6 col-md-offset-3 col-xs-12">
    <div class="gallery__controls-prev">
      <img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png" class="left">
    </div>
    <div class="gallery__controls-next">
      <img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png">
    </div>
  </div>
</div>