jquery mobile不加载轮播插件答案

【问题标题】：jquery mobile does not load carousel pluginjquery mobile不加载轮播插件
【发布时间】：2013-07-19 07:25:45
【问题描述】：

我建立了一个 jquery 移动网上商店，几乎一切都完美无缺。

这是我的脚本部分：

$('div[data-role="page"]').live("pageinit",function(event){

$("#foo").carouFredSel({
    responsive  : true,
    scroll      : {
        fx          : "cover-fade"
    },
    items       : {
        visible     : 1,
        width       : 350,
        height      : "100%"
    },
    swipe: {
        onMouse: true,
        onTouch: true
    }
  });
});

我想使用carouFredSel-plugin，因为它反应灵敏并支持滑动手势。

问题是，当您访问页面（http://m.wohnfreuden.de）时，轮播没有加载，有时刷新站点后显示，有时所有幻灯片相互显示。

希望您能帮助我找到正确的解决方案。

【问题讨论】：

标签： jquery jquery-mobile plugins jquery-plugins carousel

【解决方案1】：

首先我的建议是找到另一个轮播。我是根据我的经验说的。

我在一年前发现了 carouFredSel 插件，乍一看它是一个完美的轮播，有大量可能的变化（当时没有滑动功能，但很容易修复） .

不幸的是，在应用程序测试阶段发现插件在与 jQuery Mobile 结合时由于某种原因随机刹车（在没有 jQuery Mobile 的桌面 Web 应用程序上没有发现同样的问题）。插件随机跳过初始化，图片一张张显示。我个人认为内容高度对这个插件很重要，jQuery Mobile 页面高度甚至只能在 pageshow 期间正确计算，但即便如此也可能会出现一些问题。

这是我们使用 jQuery Mobile 初始化插件的演示（概念验证）：http://jsfiddle.net/Gajotres/Np3G4/

它只会从右向左滑动。

$('#carousel').carouFredSel({
    width: '100%',
    height: 250,
    items: 5,
    auto: false,        
    scroll: {
        items: 1,
        duration: aniConf.duration,
        onBefore: function( data ) {          
            data.items.old.eq(1).animate(cssSmall, aniConf);
            data.items.old.eq(2).animate(cssMedium, aniConf);
            data.items.old.eq(3).animate(cssLarge, aniConf);
            data.items.old.eq(4).animate(cssMedium, aniConf);
        }
    }
});

$("#carousel, #home").bind('swipeleft',function(event, ui){
     $("#carousel").trigger("next", 1);
});

最后，我的建议是找到另一个解决方案，因为如果开发人员在过去一年中没有解决这个问题，我认为他们永远不会解决这个问题。

【讨论】：