Блог

Я хочу сделать карусель. Но не простая карусель с изображениями. У меня есть эта html-структура, посмотрите ниже. У меня есть три раздела. Каждый раз показывается один раздел. Приведенный ниже тег изображения — это фоновое изображение, которое должно быть анимированным. Ширина этого изображения составляет 3000 пикселей. Раздел div равен 1000 пикселям div. Когда я нажимаю на другую страницу. Второй раздел должен быть показан, а изображение ниже должно прокручиваться до -1000 пикселей и т.д. Но это не работает…. Может быть, ты сможешь мне помочь.

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

И 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()
        });
  

Вам нужно использовать

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

Поскольку другой другой определяет, что он должен быть 1000 пикселей, где будет указано, удалите 1000 пикселей из текущей левой позиции.

И для раздела вы могли бы сделать

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

и внутри щелчка

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

Но все еще есть тот факт, что вам нужно проверить, является ли это первым элементом 🙂