В чем основные проблемы моего убогого слайдера?

Question

[olegkurbatov]

Есть простая версия слайдера который прокручивается в "реальном времени" по одному пикселю каждые * милисекунд.

var sliderElement = document.getElementsByClassName('header__slider-ul');
var a = 5;

var slider = setInterval(function() {
    a = a-1;
    sliderElement[0].style.marginLeft = a + "px";
    if (a < -665) {
        a = 5;
    }
}, 100);

function sliderMouseOut() {
    slider = setInterval(function() {
        a = a-1;
        sliderElement[0].style.marginLeft = a + "px";
        if (a < -665) {
            a = 5;
        }
    }, 100);
}

function sliderMouseOver() {
    clearInterval(slider)
}

В самом html есть блок, в котором куча картинок. Как можно улучшить этот страх?

Comments

[olegkurbatov]

В сети обычно находил слайдеры с кнопками, которые просто переключают картинки. Это не подходит, должна быть каруселька в которой постоянно прокручиваются, мозгов пока хватило только на подобное. Хотелось бы узнать варианты поинтересней.

[M-ka]

а в чем собственно проблема требующая улучшения? какая цель? его и так не можно использовать в том виде, в котором он сейчас, в некоторых браузерах на первой же строке кода будет ломаться ;) В кое каких на 4й при таком подходе... и тд....

[olegkurbatov]

M-ka: Ну поэтому я хочу знать как делать нормально.

[M-ka]

olegkurbatov: тогда может следует для начала почитать, что и как работает с того, что было написано? Самое базовое про переменные... как правильно использовать вар или как получать классы и где это НЕ работает. Ну это то, только так, для начала....

[olegkurbatov]

M-ka: не вижу смысла читать "для начала" то используется ли тот или иной элемент в древних IE. На изучение это никак не повлияет. Для проекта да.
А про вар, что именно я сделал не правильно?

[M-ka]

olegkurbatov: с подходом, на все какать.... можно это сделать и на вары... зацепку дал, что искать и исправлять, а дальше желаю успехов....

Answer 1

[Negwereth]

Для начала начать пользоваться transform.
Потом посмотреть в сторону requestAnimationFrame.
А ещё разобраться как работают transition.

Comments

[olegkurbatov]

знаком с этим, но чет не думал о том что бы применять это в слайдере, спасибо за почву для размышлений!)

[Negwereth]

olegkurbatov: знакомо ли вам понятие reflow?

[olegkurbatov]

Negwereth: Нет, читаю.

[Negwereth]

olegkurbatov: ну вот как раз после прочтения вы поймёте, что именно не так с вашим слайдером )

Answer 2

[Никита Кит]

Велосипедируете, господа.
У swiper есть freemode и в его api стопроц можно докодить автоскроллинг с нужной скоростью.
idangero.us/swiper/demos/09-freemode.html
idangero.us/swiper/api

Comments

[olegkurbatov]

Мне это нужно не для проекта а для себя, так что спасибо, не подходит.

[Никита Кит]

olegkurbatov: а ну если руками... Я немного не пойму зачем тело функции setInterval копипастить. Можно просто вызвать функцию slider в sliderMouseOut. Ну это явно кусок кода - не весь код. Ибо чёт я не вижу eventListeners, без которых у тебя явно не будет работать сий код

[olegkurbatov]

Да спасибо, изменил код.

var sliderElement = document.getElementById('sliderCarousel');
var sliderStartPoint = 5;
var sliderInterval;

function sliderFunc() {
    sliderInterval = setInterval(function () {
        sliderStartPoint--;
        sliderElement.style.marginLeft = sliderStartPoint + "px";
        if (sliderStartPoint < -665) {
            sliderStartPoint = 5;
        }
    }, 100);
}

function sliderMouseOver() {
    clearInterval(sliderInterval);
}

sliderFunc();

На момент написания кода мозгов не хватило. Сейчас переосмыслил. Стало лучше как мне кажется!?

[Никита Кит]

olegkurbatov: перестаньте велосипедить. Займитесь лучше реактом, уважаемый. Намного полезнее занятие

[olegkurbatov]

Никита Кит: Ладна :C