调整大小时滑块全宽

Question

I'm working on this slider: http://codepen.io/anon/pen/viBHe

When you open the page the slider gets the 100% width of the screen , which is working good and what I want to achieve but the problem is that when you resize and make the screen bigger , then it shows the next slide, like this:

Any ideas on how to keep the 100% width on resize of the screen?

Also, does anybody knows why is starting from the last slide?

This is the script I'm using:

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

Just try adding px to the answer posted by @SauriolJf

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

Check CodePen demo

---

I am providing a fiddle created with my way of making a slider , custom made to match the output the asker wants:

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

For the width of your slider, you could trigger the resize of the window with .resize() . Every time window is resize, you readjust the width of the slide.

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

Here's a fiddle , resize the window to see that the div will always be 100% of width.