Question

我刚刚在我的网站上实现了一个名为flip-carousel.js的插件。以下是实施示例。

问题是我想拥有相同插件的多个实例。插件的初始化如下。

$('article').flipcarousel({
    pagination: false,
    loader: true,
    itemsperpage: 3,
    randomizer: 0.7
});

对于多个实例，我使用了类而不是元素。该插件获取元素列表并使用注入的元素+我在html标签中的内容将它们更改为效果。以下是多个实例的实现。

var roomTypes = hotelData.getSelectedRoomTypeIds();
roomTypes.forEach(function(e){
    if($('.flip_article_' + e.toString()).length > 0){
        $('.flip_article_' + e.toString()).flipcarousel({
            pagination: false,
            loader: true,
            itemsperpage: 3,
            randomizer: 0.7
        });
    }
})

我最初创建了一组具有给定类名（'.flip_article_' + e.toString()）的元素。例如，类名可以是flip_article_1210。

然后我循环遍历元素并初始化插件。问题是，第一个轮播初始化没有任何问题，但是从第二组元素开始，虽然轮播是初始化的，但它中没有元素项。我尝试阅读插件代码进行修改，但无法得到一个想法。

首先想到的是，插件使用名为flip-carousel的父类，并将所有内容附加到其中，如果我可以为每个创建的旋转木马创建唯一的父类，其余的就可以了！但它不起作用，因为其他方法依赖于它。

我在以下网址中链接了该插件的来源。如果有人可以帮助我，那将是一个很大的帮助。

plugin source.

Answer 1

我已经编辑了一下插件，现在工作正常。

在this文件

中的第73行

将$card = $('.card');更改为$card = $container.parent().find('.card');

选中此fiddle

<强>更新

你应该像这样初始化插件

$('#flip1 article').flipcarousel({
    pagination: true,
    loader: true,
    itemsperpage: 3,
    randomizer: 0.7
});

$('#flip2 article').flipcarousel({
    pagination: true,
    loader: true,
    itemsperpage: 3,
    randomizer: 0.7
});

使用同一插件的多个实例

1 个答案: