Значение вашей глобальной переменной изменилось в вашей функции, но вы ничего не сделали с состоянием видимости ваших <li> s. Функции .hide() и .show() выполняются только один раз после загрузки страницы.
Я подготовил небольшой альтернативный скрипт, который, надеюсь, будет делать то, что вы хотели:
Каждый раз, когда нажимается кнопка делает следующее:
- это
.hide() s все <li> элементы в вашем jquery выборе $('#slider li'), - , затем он находит
idx -й <li> элемент и делает его видимым снова (.show()) - , при этом он увеличивает
idx до следующего значения - и, наконец, добавленный
.click() вызывает первый щелчок кнопки после загрузки .
Конструкция (idx%len) гарантирует, что .eq() -позиции ограничены существующими значениями.
const ul=$('#slider li'),len=ul.length;
var idx=0;
$('#controlNext').click(ev=>ul.hide().eq((idx++)%len).show()).click()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="controlNext">next</button>
<div id="slider">
<ul>
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
<li>slide4</li>
<li>slide5</li>
</ul>
</div>
Несколько более "чистая" версия вашего скрипта (меньшее количество глобальных констант и переменных) будет выглядеть следующим образом:
const ul=$('#slider li');
ul.idx=0
$('#controlNext').click(ev=>ul.hide().eq((ul.idx++)%ul.length).show()).click()
ul теперь является единственным глобальным const, содержащим объект jquery с его <li> -коллекцией внутри. Затем я напрямую использую его свойство .length и добавляю к нему дополнительное свойство .idx (вместо использования глобальной переменной).