Rotating child elements in wrapper + Button Navigation

Question

@j08691 answered the question How to continuously rotate children in a jQuery animation? with a nice example. However, I need to expand his example and can't see how to do it dynamically. This is a small graphic of what I have:

The gray box is my banner-group, which contains the fading 4 banneritems. The green boxes are my buttons 1 to 4. Clicking on button 1 should display banneritem 1 and hide all the others. The rotating process should continue with banneritem 2 then. If I click on button 4, it should display banneritem 4.

jsfiddle: http://jsfiddle.net/wxvTp/

html:

<div class="col3 bannergroup">
    <div class="banneritem">
        <h1>Lorem Ipsum 1</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <a href="#" title="Jetzt unverbindliches Angebot anfordern" class="btn orange">Wir freuen uns auf Ihr Projekt.</a>
    </div>
    <div class="banneritem">
        <h1>Lorem Ipsum 2</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <a href="#" title="Jetzt unverbindliches Angebot anfordern" class="btn orange">Wir freuen uns auf Ihr Projekt.</a>
    </div>
    <div class="banneritem">
        <h1>Lorem Ipsum 3</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <a href="#" title="Jetzt unverbindliches Angebot anfordern" class="btn orange">Wir freuen uns auf Ihr Projekt.</a>
    </div>
    <div class="banneritem">
        <h1>Lorem Ipsum 4</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <a href="#" title="Jetzt unverbindliches Angebot anfordern" class="btn orange">Wir freuen uns auf Ihr Projekt.</a>
    </div>                              
    <div class="slider-control-nav desktop"> <!-- buttons are here -->
        <a class="button1" href="#">
            <img src="images/icon-slider-control-cs.png" alt="Grafikdesign" />
        </a>
        <a href="#" class="button2">
            <img src="images/icon-slider-control-gd.png" alt="Content Strategy" />
        </a>
        <a class="button3" href="#">
            <img src="images/icon-slider-control-wd.png" alt="Grafikdesign" />
        </a>
        <a class="button4" href="#">
            <img src="images/icon-slider-control-cs.png" alt="Content Strategy" />
        </a>
    </div>
</div>

EDIT: This is what I tried, however, it is a) not working, b) would have to be done for all 4 buttons.

   $( ".button4" ).click(function() {
    $('div.bannergroup').each(function () {
        $('div.banneritem', this).not(':nth-child(4)').hide();
        var thisDiv = this;
        setInterval(function () {
            var idx = $('div.banneritem', thisDiv).index($('div.banneritem', thisDiv).filter(':visible'));
            $('div.banneritem:eq(' + idx + ')', thisDiv).fadeOut(0, function () {
                idx++;
                if (idx == ($('div.text', thisDiv).length)) idx = 0;
                $('div.banneritem', thisDiv).eq(idx).fadeIn(600);
            });
        }, 6000);
    });
});

Answer 1

Take a look at this: http://jsfiddle.net/Palpatim/TfK4J/6/

Some notes on your previous code:

• Set your .banneritems initial state using CSS rather than jquery. Less work for the browser, and less likely to get a "flash" of content as jquery figures out what should be hidden and shown.
• You were doing a lot of work in the setInterval call, but really all you wanted to do was display a new banner. Refactor your code as much as possible to reduce the work being done in the interval

Good luck.

[EDIT: Corrected fiddle URL to the one that has display:block on the banneritem:first-child]