Question

我正在使用Lightweight jQuery Content Slider并尝试弄清楚如何使基于宽度百分比而不是基于像素的方式适合响应式设计。以下是滑块的代码：

HTML

<div id="button">
         <a class="button1 active" rel="1" href="#"></a>
         <a class="button2" rel="2" href="#"></a>
         <a class="button3" rel="3" href="#"></a>
    </div> <!-- end of div button-->

    <div class="clear"></div>

    <div id="myslide">
        <div class="cover">

            <div class="mystuff">
                some slide content
            </div>
            <div class="mystuff">
                some slide content
            </div>
            <div class="mystuff">
                some slide content
            </div>

        </div> <!-- end of div cover -->
    </div>  <!-- end of div myslide -->

CSS

#myslide {width:160px;overflow:hidden;position: relative;height:170px;margin-bottom:20px}

    #myslide .cover{
        width:480px; /*------- class mystuff width * number of mystuff divs (160 * 3 = 480)---------- */
        position: absolute;
        height:160px;
    }

    #myslide .mystuff {width:160px;float:left;padding:20px 0;}

    .button1,.button2,.button3{background:#999;padding:6px;display:block;float:left;margin-right:5px;}
    .active{background:#111;padding:6px;display:block;float:left;outline:none;}
    .clear{clear:both;}

JS

$(document).ready(function (){
    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        $('#myslide .cover').animate({left:-160*(parseInt(integer)-1)})  /*----- Width of div mystuff (here 160) ------ */
        $('#button a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    }); 
});

Answer 1

在这里和那里稍作调整。

**首先替换

left:-160*(parseInt(integer)-1)

与

left: -($('#myslide').width()) * (parseInt(integer) - 1)

然后进行一些CSS更改，如

#myslide .cover {
    width:300%;
}
#myslide .mystuff {
    width:33.3%;
}

现在您只需要将#myslide的宽度更改为您想要的任何内容

#myslide {
    width: 160px;
}

以下是工作副本 - http://jsfiddle.net/E2xp4/

给jQuery内容滑块百分比宽度

1 个答案:

然后进行一些CSS更改，如