Question

我建立了一个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）没有加载轮播，有时会在刷新网站后显示，有时所有幻灯片都会相互显示。

希望你能帮我找到合适的解决方案。

Answer 1

首先，我的建议是寻找另一个旋转木马。我是在谈论我的经历。

我在一年前找到了 carouFredSel 插件，乍一看它是一个完美的旋转木马，有大量可能的变化（此时没有滑动功能但很容易可以解决的）。

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

这是我们用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);
});

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

jquery mobile不加载carousel插件

1 个答案: