У меня есть карусель с тремя <section> элементами.Примерно так:
<div role="main" class="main selection-carousel">
<section>
<h1>Kies je <span class="right">favoriete</span> Smaak</h1>
<aside class="aside">
</aside>
</section>
<section>
<h1>Item 2</h1>
<aside class="aside">
</aside>
</section>
<section>
<h1>Item 3</h1>
<aside class="aside">
</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>
<a href="#" title="Ga naar de vorige thee smaak" class="carousel-right">Ga naar de vorige thee smaak</a>
</div>
При нажатии на <a> .carousel-слева.<img> - -1000 пикселей влево.И второй раздел - шоу.При нажатии на карусель-вправо.Изображение идет 1000 пикселей вправо.И раздел перед шоу.
Но у меня проблема с кнопками карусели.Когда я в первом разделе.Тогда вы не можете щелкнуть правой кнопкой мыши карусель.Как я могу это сделать?
Когда я в первом разделе.Должна ли карусель скрыта правой кнопкой.И когда я в последнем разделе.Оставленная карусель должна быть скрыта.
Спасибо!
Это мой javascript:
$(function () {
var background = $(".carousel-image")
buttonLeft = $(".carousel-left")
buttonRight = $(".carousel-right");
$("section").hide();
$("section:first").show();
buttonLeft.click(function (e) {
e.preventDefault();
background.animate({ left: "-=1000px" }, 1100, "easeOutQuad", function () {
$("section:visible").hide().next().fadeIn(600);
});
});
buttonRight.click(function (e) {
e.preventDefault();
background.animate({ left: "+=1000px" }, 1100, "easeOutQuad", function () {
$("section:visible").hide().prev().fadeIn(600);
});
});
});