flowbite
flowbite copied to clipboard
Flowbite Carousel: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.
Describe the bug Created a new carousel instanced passed in all the necessary options and got the above error
JS
const options = {
activeItemPosition: 1,
interval: 3000,
indicators: {
activeClasses: 'bg-indi-act',
inactiveClasses: 'bg-indi-def hover:bg-gray-800',
items: [
{
position: 0,
el: document.getElementById('carousel-indicator-1')
},
{
position: 1,
el: document.getElementById('carousel-indicator-2')
},
{
position: 2,
el: document.getElementById('carousel-indicator-3')
},
]
}
}
const carousel = new Carousel(items,options);
carousel.cycle()
### MARKUP
<div class="flex rounded absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
<button id="carousel-indicator-1" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 1" ></button>
<button id="carousel-indicator-2" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2"></button>
<button id="carousel-indicator-3" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3"></button>
</div>
To Reproduce Steps to reproduce the behavior:
Expected behavior A clear and concise description of what you expected to happen. carouse
Screenshots
If applicable, add screenshots to help explain your problem.

Found out the bug was caused due to the extra white space presents in the inactiveClasses, The particular line in the carousel library leading to the bug is
indicator.el.classList.add(...this._options.indicators.inactiveClasses.split(" "))
in _setActiveItem() method
_setActiveItem(position) {
this._activeItem = this._items[position]
// update the indicators if available
if (this._indicators.length) {
this._indicators.map(indicator => {
indicator.el.setAttribute('aria-current', 'false')
indicator.el.classList.remove(...this._options.indicators.activeClasses.split(" "))
indicator.el.classList.add(...this._options.indicators.inactiveClasses.split(" "))
})
this._indicators[position].el.classList.add(...this._options.indicators.activeClasses.split(" "))
this._indicators[position].el.classList.remove(...this._options.indicators.inactiveClasses.split(" "))
this._indicators[position].el.setAttribute('aria-current', 'true')
}
}