Question

我在主题森林的点击登陆页面上有滑块循环（我已经购买了它）。

我将Slider的标题添加到效果不错的图像中，但是 - 我需要修理一件事：标题宽度！

标题是相同的标题，不会因文本宽度而改变。用短文看大宽度是不好看的。

这是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 }

请参见页面：Clickr Slider Cycle

或者如果您愿意：JSfiddle

Answer 1

所以问题来自集合width=200px;。为了使其可调，请在style.css：

中找到以下代码

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

并将其更改为width: auto;。这应该使标题宽度与文本一样宽。

Javascript滑块标题宽度按文字

1 个答案: