Preciso encontrar uma forma de trocar as informações data-id e data-content para .number e .passo automaticamente, sem ter que depender do hover().
Preciso manter tanto a forma automática dessa troca como se fosse uma apresentação e o hover() se caso o usuário quiser permanecer na visualização de uma informação especifica.
Creio que fui claro
JS
$(function(){
$('.nav-metodologia img').hover(function(){
var getID = $(this).data('id');
var getContent = $(this).data('content');
$('.number').html(getID);
$('.passo').html(getContent);
//console.log(pegaId);
});
});
HTML
<div class="nav-metodologia pull-right slide-here">
<img src="images/01.png" data-id="1" data-content="conteudo 01"/>
<img src="images/02.png" data-id="2" data-content="conteudo 02"/>
<img src="images/03.png" data-id="3" data-content="conteudo 03"/>
</div><!-- /.nav-metodologia -->
<div class="box-metodologia">
<div class="number radius-2">1</div>
<div class="passo">
<p>Conteúdo inicial</p>
</div><!-- /.box-metodologia -->
</div><!-- /box-metodologia -->
.number
e.passo
existem? uma por imagem ou só um de cada? O que quer dizer com automático? => quando a página carrega?