When adding previous and next arrow next to carousel indicators, previous event selects correct indicator while next event does not

[BenBitDesign]

Summary

When I add a previous and next arrow next to the carousel indicators and hook up previous() and next() events on them for going to next/previous slide, when clicking on the next arrow (i.e. calling next() event), every even second indicator is "skipped". Skipped meaning the indicator is not marked correctly on the second and fourth slide in my example. When using the previous arrow (i.e. calling previous() event), this is working fine.

JSFiddle: https://jsfiddle.net/0jdqzytw/1/

Expected Behavior

I would expect the next() event to work like the previous() event and mark the indicator correctly at all times.

Current Behavior

When calling the next() event while on the first slide to go to the second slide (or from the third to the fourth slide), the indicator does not mark the second (or fourth) dot correctly. It stays on the first (or third) dot while it's on the second (or fourth) slide. This keeps going every second slide if you would add more slides. You can easily see this by clicking on the next arrow and watching the indicator dots in the JSFiddle.

Important note: The previous() event works fine on all slides

Possible Solution

I have not been able to figure out how the JavaScript selects the indicator to mark myself. I would think that the selection for the previous() event is currently not matching the selection for the next() event. The previous() event works fine on all slides.

Steps to Reproduce (for bugs)

1. Open JSFiddle linked above
2. Click the next arrow multiple times and see the indicator not being marked as active correctly every second slide
3. (note) Clicking the previous arrow will indicate the correct indicator at all times

Context

I bumped into this while I was trying to create next/previous arrows next to the indicators for moving the slides as seen in the JSFiddle.

In addition to this issue, clicking the indicators is also not working correctly now. When clicking the second indicator, the third slide is activated. Most likely because I have added child elements in the <ul> and the count is wrong. I have added <span> items in the hope that it is only counting <li> items but that does not seem to be the case.

Your Environment

• Version used:
• Browser Name and version: Microsoft Edge Version 86.0.622.69
• Operating System and version: Desktop, Windows 10
• Link to your project: https://jsfiddle.net/0jdqzytw/1/

[doughballs]

Hey @BenBitDesign

I'm just a user...but looks like the issue is your code, not the library. Check this pen of mine, it's an old one made to demo something else, but I just added the indicators in they work just fine.

https://codepen.io/doughballs/pen/PoNGLER

[BenBitDesign]

Hi @doughballs

Thanks for your reply. I think it is because my indicators are added within the unordered list <ul> with the other "dot indicators". While yours are simply buttons under the slider. Maybe I need to move the arrows out of the <ul> as a workaround but then the positioning of them will get messy.

It seems to me like the code behind the next and previous events is counting the elements within the <ul> in a different way, since the previous arrow does work