2

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 = {};
$('.physician').hoverIntent(function(){
    slideToPhysician($(this).attr('rel'));
}, function(){ return false; });

function slideToPhysician(rel){
    var $items = $('.circular-gallery ul li').trigger('currentVisible');
    var index = $items.index($('li.'+rel));
    //console.log(index);
    //$('.circular-gallery ul').trigger('slideToPage', index);
    $('.circular-gallery ul').trigger('slideTo', index);
}

問題は、各要素のインデックスが一定でないことです。スライダーが動くたびに変化します。そのため、どちらにスライドするかを判断するのに苦労しています。スライダーの各liにクラスがあり、リンクの「rel」属性を使用して、対応するクラスをhoverIntentイベントに渡しています。デバッグ中に同じ名前をロールオーバーすると、インデックスが 6 になることがあります。その後、スライドしてスライドし、もう一度ロールオーバーすると 10 になります。パターンがわかりません。そもそも何かがおかしい。

間違ったことをしただけかもしれませんが、目標は、ページの中央に「強調表示された」アイテムを含むスライダーを配置することです。その後、名前の上に数秒間カーソルを合わせると、スライダーがその特定の写真に移動します。

お時間を割いていただきありがとうございます。

4

2 に答える 2