How to make a 250px horizontal slider per click?

Question

How to make a 250px horizontal slider per click?

Navigation

#1 by (4 votes)

1

Good morning, I used the instagram API to display my profile photos on the website and found no carousel solution that did not conflict with jQuery from Magento, so I started to do the same thing.

With the Instagram's own API I calculated the total length of the div.insta I need using multiplication and sum of the quantity and width of the photos and assign the result of that math to width of it.

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

Result:

NowIneedtomakediv.instaslidehorizontallybackandforththroughtheseprev/nextbuttonsIcreated.

The site !!!!

html jquery css

asked by anonymous 08.06.2015 / 17:25

1 answer

Generate a word between words defined [PHP] SetInterval execution failed

score 4 · Accepted Answer

animate of jQuery method can solve your problem. You can change the margin of your div .insta according to the size of the photos, and 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 in the console of your site, you will see that the right button now causes all your content to move to the left. You can use the same logic for the left button. It is worth remembering that the above code does not check if the images are finished or not, it just transitions the margin. This check will depend on the number of images you have.

EDIT :

I think the following code reproduces the effect you're 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();
        }
    });
});

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

Basically, I set a variable called offset that 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 arrow from the left (although this you can set in CSS and save a bit on your JS). If my offset grows to the point of being the total number of photos, I hide the right arrow. Logic is basically this. As I said, this code is far from great, but I think it already gives you a good idea.