Первый слайдер на JavaScript. Как улучшить код?

Question

[colorkid]

Всем привет. После 2.5 месяцев изучения JS родил вот это https://jsfiddle.net/colorkid/uwhp5y7e/
Было не просто, но реально увлекательно. Прошу подсказать где в данном коде можно что оптимизировать? Мнения как сделать лучше?
Спасибо.

Comments

[bubbleboom]

хороший код

[copal]

Теперь Вам нужно познакомится с функциями конструкторами - классами, чтобы я смог создать больше одного экземпляра Вашего чуда. И так нежно отказаться от строго заданных размеров, они должны вычисляться динамически. То есть сделайте контайнер с классом "slider-ck" которому я смогу задать размеры какие только мне пожелается. А вот Вы уже в самом начале выбирайте все такие контейнеры, ведь я могу и два их создать с разными размерами, а Вы должны все это учесть.

Answer 1

[amatory10]

самое главное ты уже сделал, написал на pure JS

Answer 2

[littleguga]

1. Сделайте так, чтобы это можно было подключить отдельным плагином.
То есть все параметры(задержка, ширина, высота, а может даже и названия классов - можно было настроить).
2. Добавьте побольше кроссбраузерности(относительно анимации)
3. Не используйте селекторы по li, а более специфичные, лучше вообще названия класса для слайдера сделать с префиксом myslider_, ну или типо того.

И не совсем понятно, зачем именовать функции, если вы их сразу же и описываете.

Answer 3

[Константин Громов]

Сделайте так, чтобы в html был лишь один ul#slider с набором li, который после использования в любой момент new Slider(element, options), где element, например, document.querySelector("#slider"), а options - объект с настройками: {speed: 500, animated: true...}, преобразовался в полноценный, готовый виджет со всей структурой. Сам вызов new Slider должен возвращать объект с набором функций, которые позволяют управлять слайдером программно (slideTo, slidePrev, slideNext, currentItem и т.д.). И чтобы было побольше опций, в первую очередь круговая прокрутка. Этих задач хватит надолго, а потом уже можно и оптимизировать, ибо будет что.