Jquery slider next/previous buttons

Question

I've built a slider where I can click the images and it moves forward. I'm am trying to add Next and Previous buttons but am having trouble. Any help is appreciated!

Here is a demo of where I am... JSFiddle

<div id="container">

    <div class="next">Next</div>
    <div class="prev">Previous</div>

    <div id="image1" class="box">Orange</div>
    <div id="image2" class="box">Blue</div>
    <div id="image3" class="box">Green</div>
    <div id="image4" class="box">Red</div>
    <div id="image5" class="box">Yellow</div>

</div>

CSS

body {
    padding: 0px;    
}

.next {
    width:100px;
    height:50px;
}

.prev {
    width:100px;
    height:50px;
}

#container {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;

}

.box {
    position: absolute;
    width: 50%;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    left: 150%;
    top: 100px;
    margin-left: -25%;
}

#image1 {
    background-color: orange;
    left: 50%;
}

#image2 {
    background-color: blue;
}

#image3 {
    background-color: green;
}

#image4 {
    background-color: red;
}

#image5 {
    background-color: yellow;
}

JQUERY

$('.box').click(function() {

$(this).animate({
    left: '-50%'
}, 500, function() {
    $(this).css('left', '150%');
    $(this).appendTo('#container');
});

$(this).next().animate({
    left: '50%'
}, 500);
});​

​

Answer 1

Hey Check this one out: http://jsfiddle.net/Dwxfc/

This should fit your need,:) also note the above sample only have the next functionality hence it repeats itself.

Rest hope it fits your need, please lemme know if this doesn't. B-)

Code

$(function(){

    //Lazyload function
    $.fn.lazyload = function(){
        var image = $(this);
        if (image.attr('real-src')){
            image.attr('src', image.attr('real-src'));
            image.removeAttr('real-src');
        }
        return this;
    };

    //Slider constructor
    $.fn.imageSlider = function(){
        this.each(function(){
            var $slider = $(this);

            var $active = $slider.find('img:first');
            $active.addClass('active');
            $active.lazyload();

            //Slider control buttons
            var $nextButton = $slider.find('.next');
            var $prevButton = $slider.find('.previous');

            $prevButton.toggle();

            //Handle if next button should appear
            $nextButton.click(function(){
                var $next = $active.next();
                $active.removeClass('active');
                $next.addClass('active');
                $active = $next;
                $active.lazyload();

                if ($active.next().length == 0){
                    $nextButton.toggle();
                }
                $prevButton.show();

            })

            //Handle if next button should appear
            $prevButton.click(function(){
                var $prev = $active.prev();
                $active.removeClass('active');
                $prev.addClass('active');
                $active = $prev;
                $active.lazyload();

                if ($active.prev().length == 0){
                    $prevButton.toggle();
                }
                $nextButton.show();
            })
        })

            return this;
        };

})

$(document).ready(function(){
    var $slider = $('#slider');
    if ($slider.find('.active').length == 0){
        $slider.imageSlider();
    }
})
​

HTML

<div id="slider" class="slider_container">
    <center>
        <a href="#" class="previous"> Previous &lt; </a>
        <a href="#" class="next"> Next &gt; </a>
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://ultradownloads.com.br/conteudo/Joyce/para_nossa_alegria_cartoon.jpg">
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://www.oesquema.com.br/trabalhosujo/wp-content/uploads/2012/03/para-nossa-alegria-pan.jpg">
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://youpix.com.br/wp-content/uploads/2012/03/para-nossa-alegria-uhu.jpg">
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://2.bp.blogspot.com/-dcgzVluf0is/T2z1K0GbVgI/AAAAAAAAMIU/yVXoH4IHV5M/s1600/para-nossa-alegria.jpg">
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://desordempublica.com.br/wp-content/uploads/2012/03/sexta-para-nossa-alegria.jpg">
    </center>
</div>

​

CSS

.slider_container {
    position: relative;
}

.slider_container img {
    display:none;
}

.slider_container img.active {
    display:block;
}
​