Carousel - Running SlideTo on active item results in hiding data

[Vuurvlieg]

Hi, its me again.

This issue is similiar like the Tabs in #187, but this time its affecting the Carousel component. When sliding to a already active item, the active item becomes hidden, which is wrong.

To reproduce:

1. Create a HTML Carousel markup without data attributes
2. Use JavaScript to initialize a Carousel instance. Disable automatically sliding using interval: false
3. Use the build-in function slideTo and gives its current active item index.
4. The result is that the currently active item will be hidden, which shouldn't

Check this example. Click the button to open the modal and then click the reset button. The result is that the active carousel item will be hidden.

At least this is for V4 (not tested for V3).

[thednp]

I don't think I understand the issue.

[Vuurvlieg]

The issue is that the active carousel disappears, just like the mentioned tab issue..
When sliding to a already active caoursel item, this item should not be hidden.

In my codepen example, the default carousel item index is 0. When you click the reset button, the carousel item with index 0 should stay visible instead of hidden.

[thednp]

OK I begin to understand. If you go next slide it always goes nicely but if you do slideTo(0) when you're already at the slide 0 it will hide. TRUE. It's broken and will not be able to handle.

However, this is a case where other carousel scripts try and duplicate slides for various reasons like swipe or simply making it able to work with anything you throw at it.

We won't do that. We understand the context and manage these cases in most efficient manner to avoid breaking the basic functionality. For instance in this particular case here's what to do: we need to filter that specific case like so:

function resetSlides() {
   if ( myCarouselInit.getActiveIndex() !==0 ) { // this is now required
     myCarouselInit.slideTo(0);
   }
}

So like many others, this is a case of user related issue, nothing to do with our script, so I'm going to close this, hoping the above will help you understand how to manage these cases.

[Vuurvlieg]

@thednp
I understand your solution which does work fine for this case. However, the project Im working on, this solution will fail, simply because sometimes I have to reset the Carousel to it's default active index, which doesn't have to be 0 . I mean, sometimes the reset button should slide to slide index 2 for example, just because index 2 was the default active slider at page load.

I know this is very specific, but a really easy solution could be added to this library to fix this kind of issue. Just check if the current item index is equal to the index of the next slide, if it is just return from function.

All you have to do is go to the slideTo function and add the following:
if (activeItem == next) { return; }

This will fix this issue completely. Please check line 595 of the JS in this fixed example

[thednp]

Perfectly acceptable solution. That's the spirit!

Thanks

[Vuurvlieg]

Thanks, but are you going to include this fix into the library, would be awesome!?

[thednp]

Yes @Vuurvlieg

[Vuurvlieg]

Awesome, thank you so much!

[thednp]

@Vuurvlieg please test latest master and check the changes

[Vuurvlieg]

@thednp I've tested the latest master and everything works fine, thank you so much!