调整大小时滑块全宽

Question

我正在研究这个滑块： http://codepen.io/anon/pen/viBHe

当您打开页面时，滑块获得100％的屏幕宽度，这是正常的，我想要实现但问题是当您调整大小并使屏幕更大，然后显示下一张幻灯片，如下所示：

有关如何保持100% width调整屏幕大小的任何想法？

另外，有人知道为什么从最后一张幻灯片开始吗？

这是我正在使用的脚本：

jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

  $('#slider').css({ height: slideHeight });

  $('#slider ul').css({ width: sliderUlWidth, height: slideHeight });

  $('#slider ul li').css({ width: slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 400, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 400, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});    

Answer 1

尝试将px添加到@SauriolJf发布的答案

$(window).resize(function(){
    $('li').css({"width":$(window).width()+"px"});
});

Check CodePen demo

---

我提供了一个小提琴，用我制作滑块的方式创建，自定义以匹配提问者想要的输出：

Slider Fiddle

<强> HTML

<div>Header</div>
<div class="container">
    <div class="slides">Slide1</div>
    <div class="slides">Slide2</div>
    <div class="slides">Slide3</div>
    <div class="slides">Slide4</div>
    <div class="slides">Slide5</div>
</div>
<div class="buttons">
    <div class="left"><span>&lt;</span></div>
    <div class="right" style="text-align:right;"><span>&gt;</span></div>
</div>

<强> CSS

html,body,.container,.slides{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}
.container{
    overflow:hidden;
    white-space:nowrap;
    font-size:0px;
}
.slides{
    display:inline-block;
    font-size:20px;
    background-color:grey;
}
.buttons{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    display:table;
}
.left,.right{
    display:table-cell;
    vertical-align:middle;
    font-size:50px;
}
.left span,.right span{
    padding:10px;
    background-color:grey;
    cursor:pointer;
}

<强>的jQuery

var scrolllft=0;
var curSlide=1;

var firstSlide=$('.slides').first().clone(),
lastSlide=$('.slides').last().clone();
$('.container').append(firstSlide);
$('.container').prepend(lastSlide);
var par=$('.container'),
cld=$('.slides');
par.scrollLeft(par.width());
$('.buttons').css('top',par.offset().top+"px");

$('.buttons').on('click','div span',function(){
    if($(this).html() == "<"){
        if(!par.is(':animated')){
            var pr=par.get(0);
            curSlide>0?curSlide--:curSlide=cld.length-3;
            if(curSlide==cld.length-3) par.scrollLeft(pr.scrollWidth-(pr.clientWidth*2));
        par.stop().animate({scrollLeft: par.scrollLeft()-par.width()+"px"}, 750,function(){
            scrolllft = par.scrollLeft()-par.width();
        });
        }
    }
    else{
        if(!par.is(':animated')){
            curSlide<(cld.length-1)?curSlide++:curSlide=2;
            if(curSlide==2) par.scrollLeft(par.width());
         par.stop().animate({scrollLeft: par.scrollLeft()+par.width()+"px"}, 750,function(){
            scrolllft = par.scrollLeft()+par.width();
        });
        }
    }    
});

$(window).resize(function(){
par.scrollLeft(par.scrollLeft()+$('.'+cld.attr('class')+':nth-child('+(curSlide+1)+')').position().left-par.position().left);
});

Answer 2

对于滑块的宽度，您可以使用.resize()触发窗口的大小调整。每次调整窗口大小时，都会重新调整幻灯片的宽度。

$(window).resize(function(){
    $('div').css({"width":$(window).width()});
});

Here's a fiddle ，调整窗口大小以确定div始终为宽度的100％。