Add automatic content exchange

Question

I need to find a way to exchange data-id and data-content information to . number and . step automatically, without having to depend on Hover().

I need to maintain both the automatic form of this exchange as if it were a presentation and the Hover() if the user wants to remain in the view of a specific information.

I believe I’ve made myself clear

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 -->

Answer 1

To switch between items, you can keep a variable that indicates the next item to be exchanged and use setInterval to perform the exchange repeatedly and increment the variable.

To interrupt the presentation with the cursor, you can use clearInterval at the event mouseover and setInterval again at the event mouseout, to resume the presentation.

Example in Jsfiddle

_{Adapted this question in Stack Overflow}