Estou criando um JS para executar o código como se fosse slides.
<div class="uk-panel uk-panel-box tm-mandato uk-hidden-small widget_recent_entries">
<div class="uk-width-1-1 uk-width-medium-1-4 uk-overlay-hover">
<div class="tm-imagem uk-height-1-1">
...
</div>
</div>
<div class="uk-width-1-1 uk-width-medium-1-4 uk-overlay-hover">
<div class="tm-imagem uk-height-1-1">
...
</div>
</div>
</div>
Fiz dois JS na tentativa de fazer com que o slides passem de forma automática (a cada 5s)e que pare a execução automática com o hover do mouse (pode ser na classe .tm-mandato ou no .uk-overlay-hover). De toda forma, ambos os códigos executam automaticamente, mas não param de executar quando tem o hover.
Código 1:
var timer;
function startTimer() {
timer = setInterval(function () {
var noticia = jQuery('.tm-mandato');
var controleActive = noticia.find('.uk-active');
var contadorNoticia = noticia.find('.uk-overlay-hover').length;
var index = controleActive.index();
controleActive.removeClass('uk-active');
if (index < contadorNoticia - 1){
controleActive.next().addClass('uk-active')
} else {
noticia.find('.uk-overlay-hover:first').addClass('uk-active')
}
}, 5000);
}
jQuery(document).ready(function($){
$('tm-mandato .uk-overlay-hover').hover(function (ev) {
clearInterval(timer);
}, function (ev) {
startTimer();
});
});
startTimer();
Código 2
jQuery(document).ready(function($){
var timer = 5000;
$('.tm-mandato > .uk-overlay-hover').mouseenter(function(ev){
clearInterval(timer);
}, setInterval (function(ev){
var noticia = jQuery('.tm-mandato');
var controleActive = noticia.find('.uk-active');
var contadorNoticia = noticia.find('.uk-overlay-hover').length;
var index = controleActive.index();
controleActive.removeClass('uk-active');
if (index < contadorNoticia - 1){
controleActive.next().addClass('uk-active')
} else {
noticia.find('.uk-overlay-hover:first').addClass('uk-active')
}
}, timer));
});
Como posso resolver essa questão do hover?