Responsive Javascript Image Slider, managing state change

Question

I have a responsive site that has an image slider that the user can look through.

Here is the link to that slider: http://firehousecoffeeco.com

I was able to get the slideshow to return to the first slide when they click the "right" button on the last slide, without the right edge of the last slide ever coming too far into the window. This is done by checking the viewport width against the container div's width (see the left button's click handler below).

My question is: How do I make it so that the same thing that is happening with the last slide happens with the first slide. (no matter what, I never want the container's left edge to go above 0px). I tried to do the same with the first slide as with the last, but it didnt' work, please see below:

Here is the markup of the slider:

<section id="photoGallery">
         <div id="slides">
             <div class="slide"></div>
             <div class="slide"></div>
             <div class="slide"></div>
             <div class="slide"></div>
             <div class="slide"></div>
             <div class="slide"></div>
        </div>
        <!--left and right buttons-->
        <div id="left" data-dir="left"></div>
        <div id="right" data-dir="right"></div>
    </section>

The container div is "slides" and it is what is being moved.

Here is my script's click handlers and transition function:

//click handlers
leftButton.on('click', function(){
    var viewport = $(window).width();
    var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left;
    var slidesContainer = $('#slides').width();

    if (slidesContainerLeftEdge == 0) { //if on first image (this is not working, help!)
        slides.animate({marginLeft: ""+-(slideShowLimiter * 320)+"px"}, 200);
        console.log("working");
    } else {
        transition("+=");
    }
});

rightButton.on('click', function(){
    var viewport = $(window).width();
    var slidesContainerEdge = $('#slides').get(0).getBoundingClientRect().right;
    var slidesContainer = $('#slides').width();

    if (slidesContainerEdge < viewport + 320) { //if last slide
        slides.animate({marginLeft:"0px"}, 200);
    } else {
        transition("-=");
    }
});

function transition(direction) {
        slides.animate({marginLeft: ""+direction+""+movement+"px"}, 200);
    }

Hopefully you guys can help me out of a jam. Thanks in advance!

Answer 1

if(0 >=slidesContainerLeftEdge > -320){ // if first slide
slides.animate({marginLeft: ($(window).width()-$('#slides').width())+"px"}, 200);
}else{
//...
}

Just to follow the logic here you used for the rightClick, so when it's the first slide on the left, you'll move the slides to the left (by setting the margin-left) so its right matches the right of the window.

See Full Code:

leftButton.on('click', function(){
    var viewport = $(window).width();
    var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left;
    var slidesContainer = $('#slides').width();

    if (0 >=slidesContainerLeftEdge > -320) {
        slides.animate({marginLeft: (viewport-slidesContainer)+"px"}, 200);
    } else {
        transition("+=");
    }
});