标签: caroufredsel

我使用carouFredSel作为无限圆形滑块与控件转到特定幻灯片时遇到了一些麻烦.这是我的实现代码:

$('.circular-gallery ul').carouFredSel({
    width: '100%',
    height:270,
    align:'center',
    items: {
        start: 10,
        width:340,
        visible: 10
    },
    prev: {
        button: $('.circular-gallery .prev')
    },
    next: {
        button: $('.circular-gallery .next')
    },
    scroll: {
        items: 1,
        easing: 'quadratic',
        onBefore: function(data){
            var $current = $(data.items.visible[4]);
            if(!data.scroll.duration){ // this happens on init, so just set active class
                $current.addClass('active');
            } else {
                var $active = $('.circular-gallery ul li.active');
                $active.find('.physician-name').fadeOut('normal', function(){
                    $(this).css('display','block').css('visibility','hidden');
                    $active.removeClass('active');
                });
                $current.find('.physician-name').css('visibility','visible').hide().fadeIn('normal', function(){
                    $current.addClass('active');
                });
            }
        }
    },
    auto: {
        play: false
    }
});

var $items …

我正在尝试在carouFredSel的当前幻灯片中添加一类"active",我无法让它工作.我最接近它的工作是将它添加到第一张幻灯片上,使用trigger("currentVisible"),但它不会更新.

救命!谢谢 :)

我正在尝试更改Caroufredsel在移动设备上显示的项目数量.现在我设置为显示4个项目并在桌面上一次滚动4个.对于移动设备,我希望它只显示2个项目并一次滚动2个.那可能吗？

$('#multimedia').carouFredSel({
        width: "980px",
        height: "auto",
        prev: "#prev",
        next: "#next",
        auto: false,
        responsive: true,
        items: 4,
        auto: {
            play: false
        },
        pagination: "#pagination",
        scroll: {   
            items: 4,
            easing : "swing"
        }                 
    });

我试图默认隐藏按钮,它们只有在鼠标结束时才会显示.虽然我在旋转木马核心代码似乎添加了显示块的问题,即使我在CSS中设置了display none.

var $slides = $("#slides");
$slides.find('ul.banners').eq(0).carouFredSel({
    height: 360,
    items: {
        visible: 1
    },
    scroll: {
        easing: "easeInOutSine",
        duration: 1200
    },
    auto: {
        delay: 1000
    },
    prev: {
        button: $slides.find('.prev'),
        items: 1
    },              
    next:{
        button: $slides.find('.next'),
        items: 1
    },
    pagination: {
        container: $slides.find(".pagination"),
        keys: true,
        anchorBuilder: function(nr) { 
            return '<li><a href="#"><span>'+nr+'</span></a></li>'; 
        }
    }
});
$slideButtons = $slides.find(".next,.prev");
$slides.find('ul.banners').hover(function(){
    $slideButtons.fadeIn();
},function(){
    $slideButtons.fadeOut();
});

HTML

<div id="slides">
    <ul class="banners">
        <li><img /></li>
        <li><img /></li>
    </ul>

    <ul class="pagination"></ul>

    <div class="next">Next</div>
    <div class="prev">Previous</div>
</div>

我在我的网站上使用caroufredsel，我只希望它在Windows宽度小于960px时有效/正常工作。正常时可以正常工作，我调整浏览器窗口大小，当它小于960px时，它开始工作，但是问题是当我再次调整窗口大小时，即使宽度大于960px，它也不会禁用，

当窗口宽度大于959px时，有什么方法可以禁用caroufredsel吗？

这是我的代码：

$(window).on("resize", function () {
    if($(window).width() <=959)
    {
        $('.item-holder').addClass('item-carousel');
        $('.item-carousel').carouFredSel(
        {
            width: "100%",
            height:200,
            circular: true,
            auto    : false,
        });

        $('#portfolio-wrapper .carousel-nav').show();

    }
    else
    {
        $('.item-holder').removeClass('item-carousel');
        $('.item-carousel').carouFredSel(false);
        $('#portfolio-wrapper .carousel-nav').hide();
    }
}).resize();

i have a little problem, everything i think quite good, example is here: a link at bottom of page "Partneriai". The idea is when on mouse over and out on next and previous buttons set a speed (duration) a little bit faster, and when mouse out set speed duration normal (default).

And it's everything working, but the problem is : need to wait when one item is slide over from div, and then is setting a configuration of duration. I …