Jquery 悬停时的clearInterval和移动时的setInterval

我创建了一个旋转木马，每5秒自动滑动一次（还有手动按钮来移动幻灯片）。我想在鼠标悬停在幻灯片上时暂停滚动，在鼠标不再悬停时恢复滚动

到目前为止，我的脚本将完成上述所有操作。
但是，它不会在页面加载时启动，您必须将鼠标悬停在上面，然后取消悬停，它才能启动

这是我的剧本：

jQuery('#viewport').hover(function () {
    window.clearInterval(timer);
}, function () {
    timer = window.setInterval(function () {
        jQuery('#next').trigger('click');
    }, 1000);
});

我该怎么做才能让它直接滑动呢？

把所有东西都包起来

$(document).ready(function()
{
    // Your code there.
});

---

恐怕这不起作用，同样的问题是不能从自动滑行开始什么东西不起作用？您可以在JSFIDLE上复制相同的内容吗？这并不能解决在页面加载时启动幻灯片放映的问题。这只是简单地包装ode，以确保它在加载DOM后执行，但仍然缺少触发实际幻灯片放映的内容。

function nextSlide () {
   jQuery('#next').trigger('click');
} 

jQuery('#viewport').hover(function() {
  window.clearInterval(timer);    
}, function() {
  timer = window.setInterval(nextSlide, 1000);
});

nextSlide();

jQuery('#viewport').on({
    mouseenter: function() {
        clearInterval( $(this).data('timer') );
    },
    mouseleave: function() {
        $(this).data('timer', setInterval(function () {
            jQuery('#next').trigger('click');
        }, 1000));
    }
}).trigger('mouseleave');