如何使JQuery滑块仅更改页面刷新上的幻灯片

Question

I have an unordered list slider in a project I'm working on for a client. Originally, the client wanted just a plain old fading slider that cycles through automatically. No problem. Now the client is coming back to me and asking if I can make it so the slider only cycles to the next slide if a user reloads or refreshes the page. The original code is below:

HTML:

<ul class="fader">
    <li>Slider content goes here</li>
    <li>Slider content goes here</li>
    <li>Slider content goes here</li>
</ul>

CSS:

div.singleColumn div.leftColumn ul.fader {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    height: 340px;
}

div.singleColumn div.leftColumn ul.fader li {
    padding: 0px !important;
    background: none !important;
    font-size: 10px;
}

JQuery for the original fading slider:

$(function() {
    $('ul.fader li:not(:first)').hide();
    $('ul.fader li').css('position', 'absolute');
    $('ul.fader li').css('top', '0px');
    $('ul.fader li').css('left', '0px');

    var pause = false;

    function fadeNext() {
        $('ul.fader li').first().fadeOut().appendTo($('ul.fader'));
        $('ul.fader li').first().fadeIn();
    }

    $('ul.fader').hover(function() {
        pause = true;
    },function() {
        pause = false;
    });

    function doRotate() {
        if(!pause) {
          fadeNext();
        }    
    }

    var rotate = setInterval(doRotate, 5000);

});

Any help you could give me would be great. Thanks in advance.

This is how it currently works: http://jsfiddle.net/6LJzN/

Answer 1

You will need to use sessionStorage I guess.

http://www.w3schools.com/html/html5_webstorage.asp

So if you store a variable in sessionStorage indicating how many times the page has been viewed. Onload you can check this variable and then rotate to the appropriate view based on the variable value.

Should also mention if you need to support non-html5 capable browsers then you may have to resort to a session cookie. Which would be very similar but the storage would be different.

Answer 2

As you have to change the slider on the page load, it clearly means you will need to have the data that tells you that which slider you displayed in last page load. That can be done by 3 ways

1) Adding into the URL as hash - Not recommended as user can try reloading without hash

2) Use cookie to save the data

3) Use localStorage to save the data - I used this.

DEMO - http://jsfiddle.net/6LJzN/1/

JS

$(function() {
    $('ul.fader li').hide();
    $('ul.fader li').css('position', 'absolute');
    $('ul.fader li').css('top', '0px');
    $('ul.fader li').css('left', '0px');

    var max = $('ul.fader li').length;

    function showSlider() {

        if(localStorage.slider) {
            $('.fader').find('li:nth('+localStorage.slider+')').fadeIn();
            localStorage.slider = parseInt(localStorage.slider,10) + 1;
            if(localStorage.slider >= max) localStorage.slider=0;
        }else{
            $('.fader').find('li:nth(0)').fadeIn();
            localStorage.slider=1;
        }
    }

    showSlider();

});