Stop automatic slide tab in the user Hover

Question

My tab is slide automaticly and I need Puss when hover and run automaticly leave hover by user now hove can Stop automatic slide tab in the user Hover? My html and css and js code this is: HTML CODE

<ul id='tabs'>
<li class='on'>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
<li>tab 4</li>
<li>tab 5</li>

CSS CODE

#tabs { list-style: none; margin: 0; padding: 0; }
#tabs li { float: left; background: #ddd; padding: 6px; }
#tabs li.on { background: #f90; color: #fff; }

JS (jQuery) CODE

$(function() {

//cache a reference to the tabs
var tabs = $('#tabs li');

//on click to tab, turn it on, and turn previously-on tab off
tabs.click(function() { $(this).addClass('on').siblings('.on').removeClass('on'); });

//auto-rotate every 5 seconds
setInterval(function() {

        //get currently-on tab
    var onTab = tabs.filter('.on');

        //click either next tab, if exists, else first one
    var nextTab = onTab.index() < tabs.length-1 ? onTab.next() :      tabs.first();
    nextTab.click();
}, 5000);
  });

Hove can use clearInterval in my code?

Answer 1

This code will pause the automatic slide on hover of any of the tabs and restart when the mouse moves away`

//cache a reference to the tabs
var tabContainer = $('#tabs');
var tabs = $('#tabs li');

//on click to tab, turn it on, and turn previously-on tab off
tabs.click(function() {
    $(this).addClass('on').siblings('.on').removeClass('on');
});

//auto-rotate every 5 seconds
var slideInterval;

function initiateSlideInterval() {
    slideInterval = setInterval(function() {

        //get currently-on tab
        var onTab = tabs.filter('.on');

        //click either next tab, if exists, else first one
        var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
        nextTab.click();
    }, 5000);

}
initiateSlideInterval();

tabContainer.mouseover(function() {
    clearInterval(slideInterval)
});
tabContainer.mouseout(function() {
    initiateSlideInterval();
});`