Question

  //NEXT
  $('.social-next a').on('click', function(e){
    e.preventDefault();
    $('.social').animate({'margin-left': '-=940'}, 500);
  });


  //PREVIOUS
  $('.social-previous a').on('click', function(e){
    e.preventDefault();
     $('.social').animate({'margin-left': '+=940'}, 500);
  });

With this code you can just slide forever, out of all the content to where ever, I couldn’t get the buttons to go away, I started getting weird errors. I tried using first and last to juts hide the buttons, but I am not sure where I went wrong and I started trying alternative methods which I am too embarrassed to even mention… I know it’s just a simple 1-2-liner though…

HTML:

    <div class="social">
        <div class="slide">
        <div class="intro">xxx.</div><!-- <a href="#" class="show-slides">view more..</a> -->
        </div>

        <div class="slide">
            <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
            <div class="content">dolor dolor dolor </div><a href="#" class="close-slides"></a>
        </div>

        <div class="slide">
            <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.</div><a href="#" class="open-slides">
            <div class="content">ipsum ipsum ipsum ipsum ipsum</div><a href="#" class="close-slides"></a>
        </div>

        <div class="slide">
            <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
            <div class="content"><div class="tekst">Lorem Lorem Lorem Lorem Lorem</div></div><a href="#" class="close-slides"></a>
        </div>

    </div>  

Answer 1

There is nothing in that code to give us a first or last position, the only thing that’s being applied is extra margin, so the only way to check position is from the margin.

For example say on the first slide the margin-left will be 0, you can check for that and hide the previous button, on the last slide the margin will be 2820px, so you can check for that and hide the next button.

That’s a nasty way of doing it but without changing the markup it’s all that is available to you with this code.

EDIT – I’ve changed the code to use the callback function of animate, as well as a filter to not allow the animation to start while it is already running, this seems to be working very well and doing exactly what you wanted: I’ve updated the demo so give it a try

var increment = -94;
$('.social-next a').on('click', function(e) {
    e.preventDefault();
    $('.social').filter(':not(:animated)').animate({
        'margin-left': '+=' + increment
    }, 500, function() {
        checkButtons($('.social').css("margin-left"))
    });
});

$('.social-previous a').on('click', function(e) {
    e.preventDefault();
    intMar = +$('.social').css("margin-left").replace("px", "");
    $('.social').filter(':not(:animated)').animate({
        'margin-left': '-=' + increment
    }, 500, function() {
        checkButtons($('.social').css("margin-left"))
    });
});

function checkButtons(margin) {
    intMar = +margin.replace("px", "");
    var children = $('.social').children('.slide').length;
    var limit = increment * (children - 1);
    switch (intMar) {
    case 0:
        $('.social-previous').hide();
        break;
    case limit:
        $('.social-next').hide();
        break;
    default:
        $('.social-previous').show();
        $('.social-next').show();
        break;
    }
}​