0

テーマフォレストのクリッカーランディングページでスライダーサイクルを持っています（購入しました）。

うまく機能する画像にスライダーにキャプションを追加しますが、修正する必要があることが1つあります。キャプションの幅です!

キャプションは同じキャプションで、テキストの幅によって変化しません。これは、短いテキストで大きな幅が表示されるのは見栄えがよくありません。

JS は次のとおりです。

// -- Cycle Slider Settings --

$(document).ready(function(){
    $('#slider').cycle({
        fx: 'scrollHorz',
        before: onBeforeCallbackFunction,
        after: onAfterCallbackFunction,
        speed:  1300, 
        timeout: 4000,
        easing:'easeInOutBack',     
        sync:1,
        pause:1,        
        pager:'#pager',     
        // callback fn that creates a thumbnail to use as pager anchor 
        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"></a></li>'; 
        }
    });
})

function onBeforeCallbackFunction(curr, next, opts) {
    //slide out the caption
    $('.caption').animate({ right: -220}, 300);
    $('.caption one').animate({ right: -120}, 200);
}

function onAfterCallbackFunction(curr, next, opts) {
    var index = opts.currSlide; //zero based index of slides
    // adjust prev/next visibility
    $('#prev')[index == 0 ? 'hide' : 'show']();
    $('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
     //  slide in the caption  
    $('.caption').eq(index).animate({ right: 0}, 600);
    console.log(index)
}

CSS は次のとおりです。

/* -- 4. SLIDER -- */

.caption{ position:absolute; top:75%; background: #333; color:#FFF; font-size:14px; width:200px;height:1em; padding:.5em 5px 10px 5px; right:-220px; z-index:20}

.caption one{ position:absolute; top:75%; background: #333; color:#FFF; font-size:14px; width:100px;height:1em; padding:.5em 5px 10px 5px; right:-120px; z-index:20}

.slider_wrap { position:relative; overflow:hidden; margin:0px; padding:0px; width:392px; height:274px; background:#fbfdff; border:1px solid #e0e4ea; padding:7px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px }
#slider { position:relative; overflow:hidden; margin:0px; padding:0px; list-style:none }
#slider li { float:left; width:392px; height:274px; overflow:hidden }
#pager { position:relative; overflow:hidden; text-align:center; margin:0px; padding:12px 0px 0px; list-style:none; z-index:999; line-height:0px; background:url(images/slider_shadow.png) 50% 0px no-repeat }
#pager li { display:inline-block; width:10px; margin:0px 2px }
#pager li a { display:block; width:10px; height:11px; background:url(images/pager.png) -14px 0px no-repeat }
#pager li.activeSlide a { background-position:0px 0px }

こちらのページを参照してください:クリッカー スライダー サイクル

または、必要に応じて: JSfiddle

4

1 に答える 1

1

したがって、問題はセットから発生しますwidth=200px;。調整可能にするには、次のコードを次の場所に配置しますstyle.css。

.caption{ ..... width:200px; }

に変更しwidth: auto;ます。これにより、キャプションの幅がテキストと同じ幅になります。

于 2012-12-09T17:52:00.313 に答える