Slider captions to be shown outslide the slides

Question

I need a slider with captions displayed outside the slides and when each slide is displayed, the corresponding caption should be highlighted outside. In the code given below, the functionality is working but it is not working in a loop. Please help.

jQuery(document).ready(function($) {

  var interval;
  interval = setInterval(function() {
    moveRight();
  }, 3000);

  $('._slider').mouseover(function() {
    clearInterval(interval);
  });

  $('._slider').mouseleave(function() {
    interval = setInterval(function() {
      moveRight();
    }, 3000);
  });

  var slideCount = $('._slider ul li').length;
  var slideWidth = $('._slider ul li').width();
  var slideHeight = $('._slider ul li').height();
  var sliderUlWidth = slideCount * slideWidth;

  $('._slider').css({
    width: slideWidth,
    height: slideHeight
  });

  $('._slider ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
  });

  $('._slider ul li:last-child').prependTo('._slider ul');

  function moveLeft() {
    $('._slider ul').animate({
      left: +slideWidth
    }, 200, function() {
      $('._slider ul li:last-child').prependTo('._slider ul');
      $('._slider ul').css('left', '');
    });
    var li = $(".caption-slider li.active").prev();
    $(".caption-slider li").removeClass("active");
    li.addClass("active");
  };

  function moveRight() {
    $('._slider ul').animate({
      left: -slideWidth
    }, 200, function() {
      $('._slider ul li:first-child').appendTo('._slider ul');
      $('._slider ul').css('left', '');
    });
    var li = $(".caption-slider li.active").next();
    $(".caption-slider li").removeClass("active");
    li.addClass("active");
  };

  $('._slider_prev').click(function() {
    moveLeft();
    return false;
  });

  $('._slider_next').click(function() {
    moveRight();
    return false;
  });

});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
  border-top: 5px solid #fff;
  background: #efefef;
  color: #2a2a2a;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  margin-left: 15px;
}

._slider {
  position: relative;
  overflow: hidden;
  margin-left: 15px;
}

._slider:hover ._slider_next,
._slider:hover ._slider_prev {
  display: block;
}

._slider_next,
._slider_prev {
  position: absolute;
  top: 35%;
  z-index: 999;
  display: none;
  width: auto;
  height: auto;
  padding: 2% 4%;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 2em;
  opacity: 0.8;
  cursor: pointer;
}

._slider_next:hover,
._slider_prev:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

._slider_next {
  right: 0;
}

._slider ul {
  position: relative;
  height: 500px;
  margin: 0;
  padding: 0;
  list-style: none;
}

._slider ul li {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  background: #ccc;
  display: block;
  width: 500px;
  line-height: 200px;
  text-align: center;
}

.caption-slider li {
  list-style-type: none;
  display: inline;
}

.caption-slider li.active {
  color: #3F51B5;
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul class="caption-slider">
  <li class="active">Caption1</li>
  <li>Caption2</li>
  <li>Caption3</li>
  <li>Caption4</li>
  <ul>
    <div class="_slider">
      <a href="#" class="_slider_next">&#10095;</a>
      <a href="#" class="_slider_prev">&#10094;</a>
      <ul>
        <li>SLIDE 1</li>
        <li>SLIDE 2</li>
        <li>SLIDE 3</li>
        <li>SLIDE 4</li>
      </ul>
    </div>

Answer 1

First of all you have one HTML mistake, you did NOT close properly the tag UL for the <ul class="caption-slider">

To get the loop working, you need to check if the last/first element have been reached, and then move to the first/last.

On function moveLeft() you need to add the following before the li.addClass("active"):

if (!li.length) { 
   li = $(".caption-slider li").last();
}

On function moveRight() you need to add the following before the li.addClass("active"):

if (!li.length) { 
   li = $(".caption-slider li").first();
}

See snippet below:

jQuery(document).ready(function($) {

  var interval;
  interval = setInterval(function() {
    moveRight();
  }, 3000);

  $('._slider').mouseover(function() {
    clearInterval(interval);
  });

  $('._slider').mouseleave(function() {
    interval = setInterval(function() {
      moveRight();
    }, 3000);
  });

  var slideCount = $('._slider ul li').length;
  var slideWidth = $('._slider ul li').width();
  var slideHeight = $('._slider ul li').height();
  var sliderUlWidth = slideCount * slideWidth;

  $('._slider').css({
    width: slideWidth,
    height: slideHeight
  });

  $('._slider ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
  });

  $('._slider ul li:last-child').prependTo('._slider ul');

  function moveLeft() {
    $('._slider ul').animate({
      left: +slideWidth
    }, 200, function() {
      $('._slider ul li:last-child').prependTo('._slider ul');
      $('._slider ul').css('left', '');
    });
    var li = $(".caption-slider li.active").prev();
    $(".caption-slider li").removeClass("active");
    if (!li.length) { 
       li = $(".caption-slider li").last();
    }
        li.addClass("active");
  };

  function moveRight() {
    $('._slider ul').animate({
      left: -slideWidth
    }, 200, function() {
      $('._slider ul li:first-child').appendTo('._slider ul');
      $('._slider ul').css('left', '');
    });
    var li = $(".caption-slider li.active").next();
    if (!li.length) {
       li = $(".caption-slider li").first();
    }
    $(".caption-slider li").removeClass("active");
    li.addClass("active");
  };

  $('._slider_prev').click(function() {
    moveLeft();
    return false;
  });

  $('._slider_next').click(function() {
    moveRight();
    return false;
  });

});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
  border-top: 5px solid #fff;
  background: #efefef;
  color: #2a2a2a;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  margin-left: 15px;
}

._slider {
  position: relative;
  overflow: hidden;
  margin-left: 15px;
}

._slider:hover ._slider_next,
._slider:hover ._slider_prev {
  display: block;
}

._slider_next,
._slider_prev {
  position: absolute;
  top: 35%;
  z-index: 999;
  display: none;
  width: auto;
  height: auto;
  padding: 2% 4%;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 2em;
  opacity: 0.8;
  cursor: pointer;
}

._slider_next:hover,
._slider_prev:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

._slider_next {
  right: 0;
}

._slider ul {
  position: relative;
  height: 500px;
  margin: 0;
  padding: 0;
  list-style: none;
}

._slider ul li {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  background: #ccc;
  display: block;
  width: 500px;
  line-height: 200px;
  text-align: center;
}

.caption-slider li {
  list-style-type: none;
  display: inline;
}

.caption-slider li.active {
  color: #3F51B5;
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul class="caption-slider">
  <li class="active">Caption1</li>
  <li>Caption2</li>
  <li>Caption3</li>
  <li>Caption4</li>
  </ul>
    <div class="_slider">
      <a href="#" class="_slider_next">&#10095;</a>
      <a href="#" class="_slider_prev">&#10094;</a>
      <ul>
        <li>SLIDE 1</li>
        <li>SLIDE 2</li>
        <li>SLIDE 3</li>
        <li>SLIDE 4</li>
      </ul>
    </div>