Search code examples
jquerysliderbxslider

BxSlider - get first and last slide


I'm using BxSlider to make a slider. I have set it to display 3 slides at the time. Works fine. Now I'm trying to get first and last slide by calculating current and total number of slides. Currently I have a total of 10 slides - and that number can vary - (to be displayed 3 at the time) and so my function doesn't work. It works if I have six or nine slides obviously.

The reason I'm interested in getting the first and last slide is because I'm going to hide the last and right link respectively. See my fiddle here. My function is this:

function LastSlide() {
            var total = slider.getSlideCount();
            var current = slider.getCurrentSlide() + 1;
            var lastslide = total / current;
            if (current == lastslide) { // Last slide
               //run stuff
            }
        }

- but when lastslide gets decimals, bad things start to happen. Anyone got an idea how to solve this? See first link for bxSlider documentation.


Solution

  • I'm not sure why exactly you are doing the LastSlide thing - I think you can just remove that variable from the function because the division isn't the correct function you need.

    Also your fiddle never shows the "Go Left" because it only shows up when current equals lastslide which is never happening.

    Here is a very simple fiddle to make the functionality work: http://jsfiddle.net/CKxg9/14/

    Also the names are quite confusing. I mean the CURRENT slide is counting 1 (3 DIVS), 2 (6 DIVS) and the total slides are 10 (in my case I used 14) which should be the DIVS not the slides.. So if you really want to work with the lastslide thing you could use:

    var total = Math.ceil(slider.getSlideCount()/3);
    

    This means if u have 10 DIVS and you want to slide 3 at once you will have 4 slides (1-3,4-6,7-9,10) Now you could use

    if (current == total) {
        $('#right').hide();
    } else {
        $('#right').show();
    }
    

    Here is a fiddle using the 2nd method: http://jsfiddle.net/CKxg9/15/ You can of course remove the lastslide because this isn't doing anything..

    Tho you still have to initialize the $('#left').show() somewhere when current > 1...

    This should help you to solve your issue - I hope..