My carousel slider includes 4 circles underneath it to indicate which slider is being displayed by adding and removing classes based on the index. Initially, the code works fine but once the carousel loops back to index 0, the jQuery code stops functioning properly in terms of adding and removing classes.
I have checked my console logs and confirmed that the loop is indeed happening, so the issue seems to be with the addClass and removeClass methods not working as expected when the slider loops back to index 0.
Is there a way to ensure that the addClass and removeClass methods in jQuery continue to function correctly even after the slider has looped back to index 0?
<div style="display: inline-block;">
<div class="greenCircle carouselCircle"></div>
<div class="greyCircle2 greenCircle2 carouselCircle"></div>
<div class="greyCircle3 greenCircle3 carouselCircle"></div>
<div class="greyCircle4 greenCircle4 carouselCircle"></div>
</div>
$(document).ready(function() {
// jQuery code block
});
This section contains the loop code where the jQuery code is integrated. For detailed information, refer to the original source code.
/**
* Wallop.js
*
* @fileoverview Minimal JS library to show & hide things
*
* @author Pedro Duarte
* @author http://pedroduarte.me/wallop
*
*/
(function(global){
// Wallop function
}(this));