Как сделать кнопки в галерее рабочими?

Question

[NonFame]

Есть небольшая галерея, с одной большой картинкой и маленькими. Сделал счетчик картинок, который отслеживает номер картинки. Все работает нормально. Но проблема в том, что не могу написать функции переключения при нажатии на кнопки.

<div class="big">
        <button id="prev">pre</button>
        <img src="img/gallery/first-big.png" alt="img">
        <p class="photo"></p>
        <button id="next">next</button>
    </div>
    <div class="small">
        <ul>
            <li><a href="img/gallery/first-big.png"><img src="img/gallery/first.png" alt=""></a></li>
            <li><a href="img/gallery/second-big.png"><img src="img/gallery/second.png" alt=""></a></li>
            <li><a href="img/gallery/third-big.png"><img src="img/gallery/third.png" alt=""></a></li>
            <li><a href="img/gallery/fourth-big.png"><img src="img/gallery/fourth.png" alt=""></a></li>
        </ul>
    </div>

$(document).ready(function () {
    //Функция переключения картинок
    $('.small ul li > a ').click(function (e) {
        $('.big img').attr('src', $(this).attr('href'))
        e.preventDefault()
    })
    //

    //Счет галереи
    let img = []; // Пустой массив(хранилище) с индексом картинок
    let smallImg = $('.small ul li') //Путь до наших картинок
    smallImg.each(function () { // Перебираем наши эл-ты с картинками и пушим их в массив img
        img.push($(this).index());
    }).click(function () { //Выводит номер картинки, по которой был совершен клик
        $('.photo').html(`<p>${$(this).index() +1}/${img.length}</p>`)



    //Выводим кол-во картинок мини-галереи в html
    $('.photo').html(`<p>${smallImg.index() + 1}/${img.length}</p>`);
    });
})

Answer 1

[0xD34F]

const $links = $('.small a');
let currentIndex = null;

function setActiveImage(index) {
  currentIndex = (index + $links.length) % $links.length;
  $('.big img').attr('src', $links.eq(currentIndex).attr('href'));
  $('.photo').text(`${currentIndex + 1} / ${$links.length}`);
}

$links.click(e => (e.preventDefault(), setActiveImage($links.index(e.currentTarget))));
$('#prev').click(() => setActiveImage(currentIndex - 1));
$('#next').click(() => setActiveImage(currentIndex + 1));

setActiveImage(0);

Comments

[NonFame]

Спасибо большое. Все понятно, но не много не понял почему остаток от деления получаем из длинны $links.
Но думаю разберусь

[0xD34F]

NonFame, четыре элемента - 0, 1, 2, 3. Какой должен быть следующий после 3? 0, надо в начало уйти. Как это сделать? Взять остаток от деления на количество элементов: (3 + 1) % 4 === 0. И с другой стороны: перед 0 должен быть не несуществующий -1, а последний 3. Надо добавить количество элементов.

[NonFame]

0xD34F, спасибо большое за объяснение