Jquery: Creating Slider with Navigation Arrows and Circle buttons

Question

I am trying to create a slider that stops once at the last slide and stops once back at the beginning, but it keeps going. Please help.

See my example link above for demo.

Example: http://jsfiddle.net/c2mKp/

HTML:

<!-- Jquery Slider -->
 <div class="jquery-slider">
        <div class="wrap">
            <div id="slider-1" class="slider">
                <img class="slider-image" src="http://www.camprefugeinc.org/test/slider/slider-image-1.jpg"/>
           </div>
           <div id="slider-2" class="slider">
               <img class="slider-image" src="http://www.camprefugeinc.org/test/slider/slider-image-2.jpg"/>
           </div>
           <div id="slider-3" class="slider">
               <img class="slider-image" src="http://www.camprefugeinc.org/test/slider/slider-image-3.jpg"/>
           </div>
           <div id="slider-4" class="slider">
               <img class="slider-image" src="http://www.camprefugeinc.org/test/slider/slider-image-4.jpg"/>
           </div>
       </div>
    </div>
<!-- Jquery Slider Buttons/CTA/Copy Overlay -->
<div class="slider-overlays">
    <div class="jquery-slider-btns">
        <img src="http://www.camprefugeinc.org/test/btn/prev-btn.png" class="button-prev prev btns">
        <img src="http://www.camprefugeinc.org/test/btn/next-hover-btn.png" class="button-next cursor next btns">
    </div>
    <div class="slider-text-overlay" id="text-overlay-1">
        <div class="text-bgcolor">Welcome to the MLT Vacations &nbsp;
            <br />Marketing Hub: Your one stop shop &nbsp;
            <br />for marketing tools to build your business!&nbsp;</div>
        <div class="jquery-slider-cta">
            <div class="cta-text">LEARN MORE</div>
            <img src="http://www.camprefugeinc.org/test/btn/jquery-cta-btn.png">
        </div>
    </div>
    <div class="slider-text-overlay" id="text-overlay-2" style="display:none;">
        <div class="text-bgcolor">Welcome to the MLT Vacations &nbsp;
            <br />Marketing Hub: Your one stop shop &nbsp;
            <br />for marketing tools to build your business!&nbsp;</div>
        <div class="jquery-slider-cta"></div>
    </div>
    <div class="slider-text-overlay" id="text-overlay-3" style="display:none;">
        <div class="text-bgcolor">Welcome to the MLT Vacations &nbsp;
            <br />Marketing Hub: Your one stop shop &nbsp;
            <br />for marketing tools to build your business!&nbsp;</div>
        <div class="jquery-slider-cta"></div>
    </div>
    <div class="slider-text-overlay" id="text-overlay-4" style="display:none;">
        <div class="text-bgcolor">Welcome to the MLT Vacations &nbsp;
            <br />Marketing Hub: Your one stop shop &nbsp;
            <br />for marketing tools to build your business!&nbsp;</div>
        <div class="jquery-slider-cta"></div>
    </div>
    <div class="jquery-slider-nav-circles"></div>
    <div class="clear-left"></div>
</div>

JQUERY:

// JavaScript Document
$(document).ready(function(){

    //Slider Animation
    $('.button-next').click(function(){  


        //Animate the images to next slide
        $('.slider').animate({"left": "-=865"}, 500);   

    });
    $('.button-prev').click(function(){ 

            //Animate the image to previous slide
            $('.slider').animate({"left": "+=865"}, 500);

    });


});

CSS:

/* Jquery Slider */
 .jquery-slider {
    height: 285px;
    width:865px;
    position: absolute;
    z-index: 1;
    overflow: hidden;
}
.slider-text-overlay {
    width:439px;
    float:left;
    position:absolute;
    z-index:3;
    margin-top:108px;
    margin-left:82px;
    color:#FFFFFF;
    font-size:15pt;
}
.text-bgcolor {
    display:inline;
    background-color:#000000;
    color:#fff;
    padding:2px 5px 5px 0px;
    line-height:18pt;
}
.jquery-slider-btns {
    width:82px;
    float:left;
    position:absolute;
    z-index:3;
    margin-top:112px;
}
.jquery-slider-cta {
    padding: 20px 0px 0px 174px;
}
.cta-text {
    position:absolute;
    z-index:3;
    text-transform:uppercase;
    font-size: 9pt;
    width:105px;
    text-align:center;
    padding-top:8px;
}
.jquery-slider-nav-circles {
    width: 231px;
    padding-left:113px;
    float:left;
    position:absolute;
    z-index:3;
    margin-top:261px;
}
.slider {
    width:865px;
    float:left;
    position:relative;
}
.slider-overlays {
    width:865px;
    position:absolute;
    z-index:2;
}
.next {
    margin-left:-5px;
}
.cursor {
    cursor:pointer;
}
.wrap {
    width: 3460px;
}

Answer 1

Right now, you're just telling the slides to move x pixels left or right based on the button the user clicks. One approach is to set a condition to check if the user is trying to go out of the boundaries of the slider.

JSFiddle: Link

First off, let's just create a variable to represent what slide we're viewing.

var slider = 0; // our default slide when we load the page

Now, let's say we click to move to the right:

if(slider != $("[id^=slider]").length - 1) {

So, slider = 0. $("[id^=slider]") gets all elements whose id begins with "slider". With .length, we get the length of the array returned by $("[id^=slider]"). Slides are numbered 0, 1, 2, 3. Subtract 1, since we started from 0. We have 4 slides - 1, which is 3. If we ever hit 3, we won't animate the slider anymore.

What about to the left? Well:

if(slider != 0) { // Simple, we don't go below 0, our first slide.

Now, in the JSFiddle, you'll see that we add or subtract one to slider after we animate the slide to keep track of where we are. You can check it out yourself to see it in action.

Another approach to take is keeping track of the position, which jmm beat me to explaining. You'll just have to utilize $("[id^=slider]").length * amount of pixels animated to ensure that if you ever add more slides in the future, you won't have to recalculate the maximum number of pixels to animate before the user hits the boundaries.

Answer 2

You need to check the position before animating and not animate if the div has moved to the max you want it to.

I added this to your click next button in this fiddle

    var position = $('.slider').position();    

    var moveLeft = position.left;

    alert(moveLeft);//testing

    if(moveLeft > -2595){
    //Animate the images to next slide
        $('.slider').animate({"left": "-=865"}, 500);   
    }

Just add the same code to your other buttong but reverse the logic.