Slider continuous switch

Question

I have a slider that is switching between dividers using previous/next buttons. But when the dividers end, the slider stops. How to change it so when reaching an end from one side(next/previous) it continues. Let's say i have 4 div, 1 2 3 4 i click next.. i reach 4, when i click 4 it should continue to 1. Any help?

HTML:

<div id="wrapper">
    <div id="nav">
        <button id="prev" disabled>&lt;&lt;&lt;</button>
        <button id="next">&gt;&gt;&gt;</button>
    </div>
    <div id="mask">
        <div id="item1" class="item"> <a name="item1"></a>

            <div class="content">
                <img id="image1" src="http://placehold.it/350x150" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
        <div id="item2" class="item">
            <div class="content">
                <img id="image1" src="http://placehold.it/350x150" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
    </div>
</div>

CSS:

body {
    margin: 0;
}
#wrapper {
    width: 100%;
    height: 350px;
    /*position: absolute;*/
    top: 0;
    left: 0;
    background-color: white;
    overflow: hidden;
}
#nav button {
    position: absolute;
    top: 100px;

}
#prev {
    left: 40px;

}
#next {
    right: 40px;


}
#mask {
    width: 50000px;
    height: 100%;
    background-color: white;
}
.item {
    width: 1200px;
    height: 100%;
    float: left;
    background-color: white;
}
.content img {
    height: 100px;
    width: 17%;
    float:left;
    margin-right: 10px;
    margin-bottom: 10px;
}
.content {
    width: 50%;
    height: 220px;
    top: 20%;
    margin: auto;
    background-color: white;
    position: relative;
}
.content a {
    position: relative;
    top: -17px;
    left: 170px;
}
.selected {
    background: #fff;
    font-weight: 700;
}
.clear {
    clear:both;
}

JQUERY:

$(document).ready(function () {
    function shift(direction) {
        var
            $mask = $('#mask'),
            $items = $('.item'),
            items = $items.size(),
            currentItem = $mask.data('currentItem'),
            newItem;

        if (currentItem == undefined) {
            currentItem = 0;
        }

        newItem = currentItem + direction;
        $mask.data('currentItem', newItem).animate({
           marginLeft: -newItem * $items.eq(0).width()
        });

        if (newItem == 0) {
            $("#prev").prop('disabled', true);
        } else {
            $("#prev").prop('disabled', false);
        }
        if (newItem == items - 1) {
            $("#next").prop('disabled', true);
        } else {
            $("#next").prop('disabled', false);
        }
    }

    $('#prev').click(function () {
        return shift(-1);
    });
    $('#next').click(function () {
        return shift(1);
    });

    function resizePanel() {
        width = $(window).width();
        height = $(window).height();

        $('#wrapper, .item').css({
            width: width,
            height: height
        });
    }

    $(window).resize(function () {
        resizePanel();
    });
    resizePanel();
});

JSFIDDLE: http://jsfiddle.net/909zce06/7/

Answer 1

I have changed the code a bit to accomodate the cyclic transition of images.

What I have done:

• The code to disable previous/next button is removed, as it would restrict from cyclic sliding of images.
• extra code added to handle the transition when the slider hits extreme ends(either direction).

JS code (relevant code) :

$('#prev').click(function () {
    if (newItem === 0) {
        newItem = itemCount - 1;
    } else {
        newItem--;
    }
    return shift();
});
$('#next').click(function () {
    if (newItem === itemCount - 1) {
        newItem = 0;
    } else {
        newItem++;
    }
    return shift();
});

Live Demo @ JSFiddle:

http://jsfiddle.net/dreamweiver/909zce06/12/

Suggestion: if you're planning to extend your current slider with more features, then I would suggest you to go with some existing slider plugins, "why re-invent the wheel when you have one already".