Question

I want make a carousel. But not a simple carousel with images. I have this html structure, look at below. I have three sections. Every time is one section show. The image tag below is the background image that must be animate. This image is 3000 pixels width. The section div is 1000 pixels div. When i click to the other page. The second section must be show and the image below must scroll to -1000 pixels etc. But it is not working…. Maybe you can help me.

<div role="main" class="main selection-carousel">
    <section>
        <h1>Kies je <span class="right">favoriete</span> Smaak</h1>

        <aside class="aside">
            <h2>Dol op chocola?</h2>
            <p>Proef een thee van <span>chocola, mint</span> en een beetje <span>zoethout</span></p>
            <a class="button purple" href="#" title="Ik kies voor Chocolat Mint thee">Ik kies voor Chocolat Mint thee</a>   
        </aside>
    </section>

    <section>
        <h1>Kies je favoriete Smaak</h1>

        <aside class="aside">
            <h2>Dol op chocola?</h2>
            <p>Proef een thee van chocola, mint en een beetje zoethout</p>
            <a class="button" href="#" title="Ik kies voor Chocolat Mint thee">Ik kies voor Chocolat Mint thee</a>  
        </aside>
    </section>

    <section>
        <h1>Kies je favoriete Smaak</h1>

        <aside class="aside">
            <h2>Dol op chocola?</h2>
            <p>Proef een thee van chocola, mint en een beetje zoethout</p>
            <a class="button" href="#" title="Ik kies voor Chocolat Mint thee">Ik kies voor Chocolat Mint thee</a>  
        </aside>
    </section>  

    <img src="static/img/bg-selection-carousel.png" width="2610" height="600" alt="" class="carousel-image">    
    <a href="#" title="Ga naar de volgende thee smaak" class="carousel-left">Ga naar de volgende thee smaak</a>
</div>

And the javascript:

$(".selection-carousel section:nth-child(3)").hide();
        $(".selection-carousel section:nth-child(2)").hide();

        var background = $(".carousel-image");

        $(".carousel-left").click(function () {
            background.animate({ left: "-1000px" },1000);
            console.log(this);
            $(".selection-carousel section" , this).hide()
        });

Answer 1

You need to use

background.animate({ left: "-=1000px" },1000);

Since the other other one defines it should be 1000px, where this will say, remove 1000px from current left position.

And for the section you could do

$("section").hide();
$("section:first").show();

and inside the click

$("section:visible").hide().next().show();

But there is still the fact you need to check if it is the first item 🙂