http://coolcarousels.frebsite.nl/c/50/Использование нескольких Карусели с CaroufredSel
Карусель является клик/салфетки перетащить слайд-шоу, и он использует caroufresel.js. У меня есть несколько экземпляров этой карусели, но когда я нажимаю и перетаскиваю одну из карусели, ВСЕ карусели двигаются. Я верю, что это в JavaScript, но я довольно новичок в этом, и я, похоже, не знаю, как это сделать.
Так что я хочу отделить каждую карусель, чтобы двигаться индивидуально.
<article class="wrapper">
<div class="caroufredsel">
<ul class="carousel">
<!--CONTENT-->
</ul>
</div>
</article>
Это базовая структура и используется несколько раз для нескольких каруселей. Каждый из них сам по себе дифференцирован, но у меня возникают проблемы с реализацией карусели для каждого, чтобы отвечать индивидуально.
Исходная ссылка наверху показывает исходную отметку вверх и js.
Оцените ответы.
Вот JavaScript:
// the carousel
var $carousel = null;
// the draggable wrapper
var $wrapper = null;
// the width of one item
var itemWidth = 1280;
// the duration of the scrolling
var scrollDuration = 300;
// dragging-engine
var startDragPosition = false;
function startDrag(event) {
event.preventDefault();
if ($carousel.triggerHandler('isScrolling')) {
startDragPosition = false;
return;
}
startDragPosition = event.pageX;
$wrapper.bind(
'mousemove',
function(e) {
$wrapper.css({
'marginLeft': -(itemWidth + startDragPosition - e.pageX)
});
}
);
}
function stopDrag(event) {
event.preventDefault();
$wrapper.unbind('mousemove');
if (startDragPosition) {
var currentDragPosition = event.pageX;
var direction = false;
if (startDragPosition < currentDragPosition) {
direction = 'prev';
} else if (startDragPosition > currentDragPosition) {
direction = 'next';
}
if (direction) {
$carousel.trigger(direction);
$wrapper.animate({
'marginLeft': -itemWidth
}, scrollDuration);
}
}
startDragPosition = false;
}
$(function() {
// the carousel
$carousel = $('.carousel');
$carousel.caroufredsel({
width: 1280 * 5,
height: 638,
align: false,
items: {
visible: 3,
start: -1
},
scroll: {
items: 1,
duration: scrollDuration
},
auto: false
});
// make the wrapper draggable
$wrapper = $carousel.parent();
$wrapper.css({
'cursor': 'move',
'marginLeft': -itemWidth
});
$wrapper.bind('mousedown', startDrag)
$wrapper.bind('mouseup', stopDrag)
$wrapper.bind('mouseleave', stopDrag);
});