Hide Arrows at end of non-infinite loop

[pioneerwebsites]

This little feature would be one of the things that makes responsiveCarousel awesome:

When clicking slowly past the final slide of a non-infinite carousel, you can't go back or forward. This could be easily prevented by hiding the next/previous arrows when they are not needed because the end of a non-infinite loop has arrived.

And it makes much more sense to the user as well...

[carasmo]

#17

The next and previous add the classes .next-inactive & .previous-inactive

[carasmo]

My slider is .multi-item-slider but this is my down and dirty way of not showing the next and the previous when there is no next and previous.

    $(document).ready(function () {
        $('.multi-item-slider .crsl-items').carousel({
            overflow: false,
            visible: 4,
            itemMinWidth: 200,
            itemMargin: 10,
            infinite: false
        });
        $('.multi-item-slider .next').click(function () {
            $('.multi-item-slider .previous').show();
        });
    });

CSS

.multi-item-slider .previous {display:none;}
.multi-item-slider .next-inactive, .multi-item-slider .previous-inactive {display:none!important;}

[pioneerwebsites]

Hey thanks for the tip Carasmo, I hadn't noticed that, and I'm using your hide-previous/show-on-click idea as well.

Only problem for me is responsiveCarousel doesn't seem to realise we're at the end of the carousel and allows one next click past the last slide, into oblivion, from where no more arrow clicks work.

You can see my play/pause buttons working, but autoRotate suffers the same fate and drives itself past the point of no return...

http://www.sydneymakeupcourses.com.au/student-gallery.htm

[carasmo]

Yes, I noticed that too. I just found it the same day I wrote you so I'm not that invested in it. I switched to Owl Carousel. It allows for custom visible items per screen width. It doesn't hide the previous but when you click it when on the first grouping, it slides to the last, so it's kinda cool. Also not as much styling opportunity as this one. However, this slider ResponsiveCarousel uses the namespace carousel and it just doesn't load correctly when used with the Bootstrap js so I had to drop it for that reason as well.

This one is rather good, but Owl is what I like so far.
http://bxslider.com/examples/carousel-dynamic-number-slides

[pioneerwebsites]

From what I can see, BX Slider doesn’t do variable image widths - that is, you have to stipulate the item width, and they have to all be identical. I dunno how it got so popular as a responsive carousel for that reason. I've fiddled with the examples and broken it, but it's possible I'm missing something.

Owl seems highly customisable (maybe complex) but I wasn't convinced it would display the overflow like we needed it to (where it would cut off the items that don't fit in the view) as it always forces the items to fit. I'm referring to this style: http://www.owlgraphic.com/owlcarousel/demos/itemsCustom.html

Which reminds me, I think you accidentally posted a local machine link in your last comment, that you may prefer to remove.

[carasmo]

The only slider that I've ever found that does variable image widths per item is LemmonSlider but it's not responsive. So far I'm going to stick with Owl.

See you can set it so that it shows 1 at small, 2 at medium, etc.,

  <script>
     $(document).ready(function() {
        $(".multi-slider").owlCarousel({
        lazyLoad : true,
        navigation : false,
        pagination: true,
        items : 4, 
        itemsDesktop : [1200,4],
        itemsDesktopSmall : [900,3], 
        itemsTablet: [600,2], 
        itemsMobile : [320,1]
    });
 });
</script>