CarouFredSel 示例 #61 - 垂直而不是水平

Question

我正在尝试修改此处设置的示例：

http://coolcarousels.frebsite.nl/c/61/

...垂直显示缩略图，而不是水平显示。

DEMO

我已经设置好所有东西，并且轮播运行正常，但我现在要克服的障碍是突出显示的缩略图出现在顶部而不是中间（我将缩略图倒计时到 3）。

这是运行轮播的 Javascript 的修改版本：

$(function() {
    var $carousel = $('#carousel'),
        $pager = $('#pager');

    function getCenterThumb() {
        var $visible = $pager.triggerHandler( 'currentVisible' ),
            center = Math.floor($visible.length / 2);
        return center;
    }

    $carousel.carouFredSel({
        responsive: true,
        items: {
            visible: 1,
            width: 746,
            height: (214/746*100) + '%'
        },
        scroll: {
            fx: 'scroll',
            onBefore: function( data ) {
                var src = data.items.visible.first().attr( 'src' );
                src = src.split( '/large/' ).join( '/small/' );

                $pager.trigger( 'slideTo', [ 'img[src="'+ src +'"]', -getCenterThumb() ] );
                $pager.find( 'img' ).removeClass( 'selected' );
            },
            onAfter: function() {
                $pager.find( 'img' ).eq( getCenterThumb() ).addClass( 'selected' );
            }
        },
        pagination: {
            container: '#nav'
        },
        duration: 10000,
    });

    $pager.carouFredSel({
        width: '252px',
        direction: 'up',
        auto: false,
        items: {
            visible: '1',
            width: 252,
            height: (71/252*100) + '%'
        },
        scroll:{
            items: '3',
        },
        onCreate: function() {
            var center = getCenterThumb();
            $pager.trigger( 'slideTo', [ -center, { duration: 0 } ] );
            $pager.find( 'img' ).eq( center ).addClass( 'selected' );
        }
    });

    $pager.find( 'img' ).click(function() {
        var src = $(this).attr( 'src' );
        src = src.split( '/small/' ).join( '/large/' );
        $carousel.trigger( 'slideTo', [ 'img[src="'+ src +'"]' ] );
    });

    $('#nav').hover(function() {
        var current = $('#carousel').triggerHandler( 'currentPosition' );
        thumbs.trigger( 'slideTo', [ current, 0, true, { fx: 'none' } ] );
        $('#thumbs').stop().fadeTo(300, 1);
    }, function() {
        $('#thumbs').stop().fadeTo(300, 0);
    });

    $('#nav a').mouseenter(function() {
        var index = $('#nav a').index( $(this) );

        //  clear the queue
        thumbs.trigger( 'queue', [[]] );

        //  scroll
        thumbs.trigger( 'slideTo', [index, { queue: true }] );
    });
});

有人知道如何将 SELECTED 缩略图从堆栈中的第一个更改为第二个并仍然与主轮播对齐吗？

编辑：我以为我在发布有关此轮播的另一个问题的赏金。所以我会添加我想做的另一个点。

如何修改代码以允许图像包含在 DIV 中并且仍然按照我上面所述的方式运行？我玩弄了 src 变量和触发器调用，但在实现我的目标方面运气不佳。

Answer 1

http://jsbin.com/geqakupe/10/edit

我在on before事件中更改了这一行：var src = data.items.visible.first().find('img').attr( 'src' );并添加了这个css规则：

#carousel div{
   position:relative;
}
#carousel {
   width: 800px;
   height: 500px;
   overflow: hidden;
   position:relative;
}
#carousel h1{
   position:absolute;
   top:0;
   left:105px;
   font-size:30px;
  color:red;
}

Answer 2

我想这个例子会对你有所帮助： http://jsbin.com/geqakupe/4/edit

您应该设置directon:"up" 和height:"100%" 选项。您还需要更改定位元素#pager-wrapper，并为其设置不同的height和width。