通过 CaroufredSel 使用多个轮播答案

【问题标题】：Using Multiple Carousels with CaroufredSel通过 CaroufredSel 使用多个轮播
【发布时间】：2013-10-24 22:31:26
【问题描述】：

http://coolcarousels.frebsite.nl/c/50/

轮播是一种点击/滑动拖动幻灯片，它使用 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);
});

【问题讨论】：

标签： javascript jquery html carousel caroufredsel

【解决方案1】：

由于您没有为轮播提供 HTML，因此很难准确判断出了什么问题。但据我所知，您将var carousel 定义为任何具有“轮播”类的东西。也许您需要给每个轮播一个唯一的 ID，然后分别初始化它们？

【讨论】：