#javascript #jquery #carousel
#javascript #jquery — запрос #карусель #jquery
Вопрос:
Я хочу сделать карусель. Но не простая карусель с изображениями. У меня есть эта 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()
});
Комментарии:
1. Я разместил демонстрационную версию в Интернете. mikevierwind.nl/demo2/selectie.html Здесь вы можете увидеть проблему / эффект. Но второй раздел должен отображаться, когда я нажимаю на кнопку Далее. И я могу нажать только один раз на кнопку next.
Ответ №1:
Вам нужно использовать
background.animate({ left: "-=1000px" },1000);
Поскольку другой другой определяет, что он должен быть 1000 пикселей, где будет указано, удалите 1000 пикселей из текущей левой позиции.
И для раздела вы могли бы сделать
$("section").hide();
$("section:first").show();
и внутри щелчка
$("section:visible").hide().next().show();
Но все еще есть тот факт, что вам нужно проверить, является ли это первым элементом 🙂
Комментарии:
1. Но когда я перехожу к третьему / последнему разделу. Тогда я должен вернуться. Это должна быть карусель. Но теперь я могу много раз нажимать на кнопку со стрелкой. И он становится все больше и больше… Также спасибо за помощь!