I have 5 li
and the function stops repeating when it reaches the same number of times. I need another function to reset or cancel this number.
This is the code that I have:
let currentIndex = 0;
function toMove() {
const slider = document.querySelector('#thumbelina0');
const element = document.querySelectorAll('li')[currentIndex];
slider.style.marginLeft = parseInt(slider.style.marginLeft)
- element.offsetWidth - 10 + 'px';
currentIndex += 1;
}
<div id="thumbelina" style="padding:5px;overflow: hidden;">
<button class="btnToLeft" onclick="toMovel()">
<
</button>
<ul id="thumbelina0" style="padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: 0px;">
<li style="padding:5px;width: auto;height: 100px;display: block;">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images)"
style="margin-top: -5px;margin-left: -5px;" />
</li>
<li style="padding:5px;width: auto;height: 100px;display: block;">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP._IgGc9h6kbuSmYLsRhBNvwHaEo%26pid%3DApi&f=1&ipt=10afdedcaa07209003fc91888b567582128374e6578bce7d2448311d0c0893f9&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP._IgGc9h6kbuSmYLsRhBNvwHaEo%26pid%3DApi&f=1&ipt=10afdedcaa07209003fc91888b567582128374e6578bce7d2448311d0c0893f9&ipo=images)"
style="margin-top: -5px;margin-left: -5px;" />
</li>
<li style="padding:5px;width: auto;height: 100px;display: block;">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images)"
style="margin-top: -5px;margin-left: -5px;" />
</li>
<li style="padding:5px;width: auto;height: 100px;display: block;">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP._IgGc9h6kbuSmYLsRhBNvwHaEo%26pid%3DApi&f=1&ipt=10afdedcaa07209003fc91888b567582128374e6578bce7d2448311d0c0893f9&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP._IgGc9h6kbuSmYLsRhBNvwHaEo%26pid%3DApi&f=1&ipt=10afdedcaa07209003fc91888b567582128374e6578bce7d2448311d0c0893f9&ipo=images)"
style="margin-top: -5px;margin-left: -5px;" />
</li>
<li style="padding:5px;width: auto;height: 100px;display: block;">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images)"
style="margin-top: -5px;margin-left: -5px;" />
</li>
</ul>
<button class="btnToRight" onclick="toMove()">
>
</button>
</div>
Seems like you are implementing carousel feature to show different images. You can use conditional statement to reset the
currentIndex
to0
when it reaches last index of array.