Add disabled class to next/prev buttons when no more slides to scroll

[Tebbott]

As the title suggests, I'd like to be able to hide my next/prev buttons when there are no more slides to flip through. Does anyone know if this is possible with the current plugin, or will the plugin code need tweaking?

[Tebbott]

Still looking for a solution to this.

I'm thinking a function that looks for the class of flipster__item--future that runs onItemSwitch, then if no element with that class is detected a class of disabled is added to flipster__button--next, but I'm not actually sure how to create it.

Anybody able to give any pointers/advice?

[drien]

I think you're on the right track with the function you're describing, you get the current item as an arg to the onItemSwitch callback so you could do something like this (I haven't tested the code but in theory it should work):

onItemSwitch: function(cur, prev) {
    $('.flipster__button--next, .flipster__button--prev').removeClass('disabled')

    if cur.siblings('.flipster__item--future').length == 0 {
        $('.flipster__button--next').addClass('disabled')
    }

    if cur.siblings('.flipster__item--past').length == 0 {
        $('.flipster__button--prev').addClass('disabled')
    }
}

Hope that's helpful.

It's a reasonable feature to consider adding in a future release so I'll leave this open.

[amjadsheen]

This works.

onItemSwitch: function(currentItem, previousItem) {
        jQuery('.flipster__button--next, .flipster__button--prev').removeClass('disabled')
        if (!jQuery(currentItem).siblings('.flipster__item--future').length) {
            console.log('Hide Next');
            jQuery('.flipster__button--next').addClass('disabled')
        }
        if (!jQuery(currentItem).siblings('.flipster__item--past').length) {
            console.log('Hide Previous');
            jQuery('.flipster__button--prev').addClass('disabled')
        }
    }

[Tebbott]

Thanks for taking ythe time to help me with this. Very much appreciated.

I've just implemented your code @amjadsheen however the disabled class is being added to both the previous and next buttons, every time, and the console logs are both being recorded.

[Tebbott]

I've used a mixture of the two responses thus far, and have the following:

`$('.flipster__button--next, .flipster__button--prev').removeClass('disabled');

	        if ($(currentItem).siblings('.flipster__item--future').length === 0 ) {
	            console.log('Hide Next');
	            $('.flipster__button--next').addClass('disabled');
	        }
	        if ($(currentItem).siblings('.flipster__item--past').length === 0 ) {
	            console.log('Hide Previous');
	            $('.flipster__button--prev').addClass('disabled');
	        }`

It's close, but it doesn't quite work still. I'll have to create a codepen to try and illustrate what I'm getting, but unfortunately, don't have the time just now.

[amjadsheen]

Use css to hide disabled arrows

.flipster__button--prev.disabled, .flipster__button--next.disabled {
	display: none;
}

[Tebbott]

Hi @amjadsheen - I have the CSS in place, the problem is as follows:

1. When you first arrive at the page, both arrows are displayed, even though there isnt a previous slide.

2. When you scroll to the second slide, the prev arrow disappears - even though there is now a previous slide.

3. When you scroll to the third slide, both buttons are visible - this is correct.

4. When you get to the final slide, the next button disappears - this is correct.

5. When you then click the previous button, to go to the 2nd to last slide, the next button remains hidden.

You can see all this in action here - https://melodyvr.com/ - the section in question appears just below the hero area - the carousel that starts with KISS.

[amjadsheen]

@Tebbott Two Possible Fixes:

S1- Remove start:0,

jQuery(".featured-slider").flipster( {
        itemContainer:"ul",
        itemSelector:"li",
        start:0,-----------> Remove
        fadeIn:400,

S2- Code Updated:

1: When you first arrive at the page, both arrows are displayed, even though there isnt a previous slide. Solution: hide on page load (fix 1) hide first on page load) 2: When you scroll to the second slide, the prev arrow disappears - even though there is now a previous slide. Solution: Extra check if is first item (fix 2) first item fix 5: When you then click the previous button, to go to the 2nd to last slide, the next button remains hidden. Solution: Extra check if is last item (fix 3) last item fix

jQuery( document ).ready(function() {
    jQuery('.flipster__button--prev').addClass('disabled'); // (fix 1)hide first on page load
});

jQuery(".featured-slider").flipster( {
        itemContainer:"ul",
        itemSelector:"li",
        start:0,
        fadeIn:400,
        loop:!1,
        autoplay:!1,
        pauseOnHover:!1,
        style:"flat",
        spacing:-.6,
        click:!0,
        keyboard:!0,
        scrollwheel:!1,
        touch:!0,
        nav:!1,
        buttons:"custom",
        buttonPrev:'<i class="fas fa-angle-left"></i>',
        buttonNext:'<i class="fas fa-angle-right"></i>',

    onItemSwitch: function(currentItem, previousItem) {
        console.log(previousItem);
        jQuery('.flipster__button--next, .flipster__button--prev').removeClass('disabled')
            if (!jQuery(currentItem).siblings('.flipster__item--future').length) {
                if(!jQuery(previousItem).is(':last-child')){ // (fix 3) last item fix
                    console.log('Hide Next');
                    jQuery('.flipster__button--next').addClass('disabled')
                }else{
                    console.log('previousItem is Last');
                }
            }
            if (!jQuery(currentItem).siblings('.flipster__item--past').length)  {

                if(!jQuery(previousItem).is(':first-child')){ //(fix 2)first item fix
                    console.log('Hide Previous');
                    jQuery('.flipster__button--prev').addClass('disabled')
                }else{
                    console.log('previousItem is first');
                }

            }
        }
    }

)

If still not fixed email me at [email protected]

[Tebbott]

You sir, are an absolute legend. There was one slight issue with the code, but it was simply an extra } at the end of the onItemSwitch function. Apart from that, this code worked a dream. Thank you so so much!

[amjadsheen]

Welcome.

On Thu, May 10, 2018, 3:54 PM Andrew Tebbott [email protected] wrote:

You sir, are an absolute legend. There was one slight issue with the code, but it was simply an extra } at the end of the onItemSwitch function. Apart from that, this code worked a dream. Thank you so so much!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/drien/jquery-flipster/issues/129#issuecomment-388021303, or mute the thread https://github.com/notifications/unsubscribe-auth/Ac5OtfZChtYB12feCyGeUWHGl8hX5YOEks5txBxZgaJpZM4S-qOc .

[drien]

This repository is going into very-low-maintenance mode and declaring backlog bankruptcy