setInterval stops after first instance

Question

I'm currently working on a carousel because i'm not wanting to use any plugins etc.

However I'm stuck on the interval part with it rotating through my elements without click.

What works:

• The Next and Prev buttons work
• Interval works for the first instance

What does not work:

• After first instance the interval seems to stop
• Interval does not carry on working when Prev or Next buttons are clicked

I've figured out that after the interval stops after the first instance, I can leave the element area and hover back over it and the interval will work correctly.

Does any one have any guidance how I could improve this?

What I have tried so far :

$(document).ready(function() {
  statementScroll();
});

function statementScroll() {
  var intervalStatement = 0;
  var intervalFunc = {
    start: function() {
      intervalStatement = setInterval(function() {
        $("#our-mission .statement .next").click();
      }, 2000);
    },
    stop: function() {
      clearInterval(intervalStatement);
      intervalStatement = 0;
    },
  };
  $("#our-mission .statement .next").on("click", function() {
    if ($("#our-mission .statement .item.active").next(".item").length) {
      $("#our-mission .statement .item.active").removeClass("active").next(".item").addClass("active");
    } else {
      $("#our-mission .statement .item.active").removeClass("active");
      $("#our-mission .statement .item").first().addClass("active");
    }
  });
  $("#our-mission .statement .prev").on("click", function() {
    if ($("#our-mission .statement .item.active").prev(".item").length) {
      $("#our-mission .statement .item.active").removeClass("active").prev(".item").addClass("active");
    } else {
      $("#our-mission .statement .item.active").removeClass("active");
      $("#our-mission .statement .item").last().addClass("active");
    }
  });

  $("#our-mission").on("mouseenter", function() {
    intervalFunc.start();
  });

  $("#our-mission .statement").on("mouseout", function() {
    intervalFunc.stop();
  });
}

#our-mission{
    height: 500px;
    max-height: 500px;
    overflow: hidden;
    background: url(../images/6.JPG) no-repeat;
    background-position: center;
    position: relative;
}
#our-mission h2{
    width: 25%;
    margin: auto;
    margin-top: 200px;
    font-size: 45px;
    background: #012265;
    background: #01226587;
    text-align: center;
    padding: 10px;
    color: #ffffff;
    border-radius: 8px;
    text-shadow: 1px 1px 1px #000000;
}
#our-mission .statement{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    background: #012265;
    background: #012265de;
}
#our-mission .statement .item{
    display: none;
}
#our-mission .statement .item h3{
    margin: 0;
    font-size: 60px;
}
#our-mission .statement .item p{
    font-size: 25px;
}
#our-mission .statement .item.active{
    display: block;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 175px;
    color: #ffffff;
    text-shadow: 1px 2px 2px #000000;
}
#our-mission:hover > .statement{
    visibility: visible;
    -webkit-transition: opacity 0.5s ease-in;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;
    opacity: 1;
    cursor: pointer;
}
#our-mission .statement .prev{
    position: absolute;
    left: 100px;
    top: 200px;
    font-size: 60px;
    color: #ffffff;
}
#our-mission .statement .next{
    position: absolute;
    right: 100px;
    top: 200px;
    font-size: 60px;
    color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="our-mission">
  <div class="statement">
    <div class="prev"><i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i></div>
    <div class="item active">
      <h3>Vision</h3>
      <p>Learn Together, Achieve Together and Celebrate Together</p>
    </div>
    <div class="item">
      <h3>Mission</h3>
      <p>To enable children to achieve their true potential in a happy and safe environment</p>
    </div>
    <div class="item">
      <h3>Core Values</h3>
      <p>Respect, Aspiration, Responsibility and Pride</p>
    </div>
    <div class="next"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></div>
  </div>
  <h2>Mission Statements</h2>
</section>

Answer 1

Instead of using mouseout use mouseleave event. mouseout is triggered when the mouse pointer is even moved out of the inner element. The mouseleave event is triggered when mouse leaves the bound element.

Answer 2

The problem is that you're using mouseout event which trigger once mouse leaves any child elements inside element where event is bounded .

So using the mouseleave will resolve the issue knowing that this last will trigger only once leaving the element it is bound to (doesn't trigger for children )

See below worknig snippet :

$(document).ready(function() {
  statementScroll();
});

function statementScroll() {
  var intervalStatement;
  var intervalFunc = {
    start: function() {
      console.log('start');
      intervalStatement = setInterval(function() {
        $("#our-mission .statement .next").click();
      }, 2000);
    },
    stop: function() {
      console.log('stop');
      clearInterval(intervalStatement);
    },
  };
  $("#our-mission .statement .next").on("click", function() {
    if ($("#our-mission .statement .item.active").next(".item").length) {
      $("#our-mission .statement .item.active").removeClass("active").next(".item").addClass("active");
    } else {
      $("#our-mission .statement .item.active").removeClass("active");
      $("#our-mission .statement .item").first().addClass("active");
    }
  });
  $("#our-mission .statement .prev").on("click", function() {
    if ($("#our-mission .statement .item.active").prev(".item").length) {
      $("#our-mission .statement .item.active").removeClass("active").prev(".item").addClass("active");
    } else {
      $("#our-mission .statement .item.active").removeClass("active");
      $("#our-mission .statement .item").last().addClass("active");
    }
  });

  $("#our-mission").on("mouseenter", function() {
    intervalFunc.start();
  });

  $("#our-mission .statement").on("mouseleave", function() {
    intervalFunc.stop();
  });
}

#our-mission{
    height: 500px;
    max-height: 500px;
    overflow: hidden;
    background: url(../images/6.JPG) no-repeat;
    background-position: center;
    position: relative;
}
#our-mission h2{
    width: 25%;
    margin: auto;
    margin-top: 200px;
    font-size: 45px;
    background: #012265;
    background: #01226587;
    text-align: center;
    padding: 10px;
    color: #ffffff;
    border-radius: 8px;
    text-shadow: 1px 1px 1px #000000;
}
#our-mission .statement{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    background: #012265;
    background: #012265de;
}
#our-mission .statement .item{
    display: none;
}
#our-mission .statement .item h3{
    margin: 0;
    font-size: 60px;
}
#our-mission .statement .item p{
    font-size: 25px;
}
#our-mission .statement .item.active{
    display: block;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 175px;
    color: #ffffff;
    text-shadow: 1px 2px 2px #000000;
}
#our-mission:hover > .statement{
    visibility: visible;
    -webkit-transition: opacity 0.5s ease-in;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;
    opacity: 1;
    cursor: pointer;
}
#our-mission .statement .prev{
    position: absolute;
    left: 100px;
    top: 200px;
    font-size: 60px;
    color: #ffffff;
}
#our-mission .statement .next{
    position: absolute;
    right: 100px;
    top: 200px;
    font-size: 60px;
    color: #ffffff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="our-mission">
  <div class="statement">
    <div class="prev"><i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i></div>
    <div class="item active">
      <h3>Vision</h3>
      <p>Learn Together, Achieve Together and Celebrate Together</p>
    </div>
    <div class="item">
      <h3>Mission</h3>
      <p>To enable children to achieve their true potential in a happy and safe environment</p>
    </div>
    <div class="item">
      <h3>Core Values</h3>
      <p>Respect, Aspiration, Responsibility and Pride</p>
    </div>
    <div class="next"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></div>
  </div>
  <h2>Mission Statements</h2>
</section>