Алгоритм смены слайдов в карусели

Question

хочу разобраться. Не могу придумать как сделать слайдер на js. Исходные данные:

n-ое кол-во фото (известно)
кол-во отображаемых фото (известно) ширина вычисляется(т.е. известна).
прокрутка кнопками и при нажатии на точки под слайдером(1ая точка соответствует изначальной первой картинке в ряду). Все делаю через смещение (translateX). При прокрутке кнопками все хорошо(дохожу до конца и клонирую фото с начала, точки внизу бегают правильно), при перемещении по точкам все тоже правильно бегает (реализация: дохожу до конца ряда фото и клонирую с начала количество-1 отображаемых фото).

Проблема в том что если я перемещался при помощи точек, а потом перешел на кнопки иногда происходит сбой(реализация: проверяю длину списка фото и позицию фото в данный момент и если позиция меньше коль-ва первоночального списка фото, то удаляю с конца лишние и все опять работает сначала, а если позиция на последних(добавленных временно фото) то тут получается очень громоздкая проверка и код). Как можно реализовать зацикленный слайдер чтобы не было глюков в описанных случаях. Или как вообще лучше делать? В нете много инфы, но везде по отдельности, нету всего и сразу чтобы подсмотреть реализацию. p.s. надеюсь понятно написал. Мне не надо код, а именно сам алгоритм. Как можно реализовать зацикленный слайдер чтобы переход осуществлялся и кнопками и сразу в любое место по точкам внизу.

Answer 1

можете реализовать его как тут(точки специально отключены для десктопа) , для этого есть готовый инструмент Slick.js

 // если ещё не подключен jQuery
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    
    <script src="/slick/slick.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="/slick/slick-theme.css"/>

<div class="slider single-item">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

    $('.multiple-items').slick({
      infinite: true,
      dots: true,
      slidesToShow: 3,
      slidesToScroll: 1
    });

БЛОГ НА HUSL

Алгоритм смены слайдов в карусели

Ответы (1 шт):