How to perform a 250px horizontal slider per click?

Question

Good morning guys, I used the instagram API to show my profile photos on the website and could not find any solution Carousel that didn’t conflict with Magento’s jQuery, so I started making the hand myself.

With the Instagram API itself I calculated the total length of the div.insta that I need using multiplication and sum of the quantity and width of the photos and assigns the result of this math to width of her own.

In turn the main div with a overflow:hidden hides this total width helped by this attribute, ie the div that opens to receive all photos continues beyond the site length, logical and the content is hidden by the main div.

Upshot:

Now I need to get div.insta slide horizontally back and forth through these buttons prev / next that I created.

The site !!!!

Answer 1

The method Animate of jQuery can solve your problem. You can change the margin of your div .insta according to the size of the photos, and the animate() gives you this transition effect. If you copy

jQuery( '.right-direction' ).on( "click", function() {
  jQuery('.insta').animate({
        marginLeft: "-=250px",
    },1000, function() {
        console.log ('moveu');
    });
});

right on the console of your website, you will see that the right button now makes all your content move to the left. You can use the same logic for the left button. Remember that the code above does not check whether the images are finished or not, it just transitions the margin. This check will depend on your number of images you have.

EDIT:

I believe the following code reproduces the effect you are looking for:

var offset = 0;

var TOTAL_IMAGENS = 10; //contei a partir do seu HTML. Você pode chegar neste valor na maneira como achar melhor

if (offset === 0){
    jQuery('.left-direction').hide();
}

jQuery( '.right-direction' ).on( "click", function() {
  jQuery('.insta').animate({
        marginLeft: "-=250px",
    },1000, function() {
        ++offset;
        console.log(offset);
        jQuery('.left-direction').show(); 
        if(offset === TOTAL_IMAGENS){
            jQuery('.right-direction').hide();
        }
    });
});

jQuery( '.left-direction' ).on( "click", function() {
  jQuery('.insta').animate({
        marginLeft: "+=250px", 
    },1000, function() {
        --offset;
        console.log(offset);
        jQuery('.right-direction').show();
        if(offset === 0){
            jQuery('.left-direction').hide();
        }
    });
});

Note that this code is not completely optimized (at various times, I run the lines jQuery('.left-direction').show(); and jQuery('.right-direction').show(); no need, but as proof of concept, I believe the code is good. If you want to be more objective, you can control with two flags whether the buttons are there or not.

Basically, I defined a variable called offset which will be incremented or decremented as you click the left and right buttons. As at the beginning, there will be no image on the left, I already hide the left arrow (although this you can set in CSS and save a little on your JS). If mine offset grows to the point of being the total number of photos, I hide the arrow from the right. The logic is basically this. Like I said, this code is far from great, but I believe it already gives you a good idea.