Всем доброго времени суток.
Вчера на курсе начал проходить модальные окна и "оживление" слайдера на чистом JavaScript без применения сторонних решений, вроде SlickSlider.
С модалками уже работал, там в принципе ничего сложного. Только добавили функционал выборочного закрытия (точнее не закрытия) модального окна, содержащего формы заявки.
А вот со слайдером было интереснее. Реализовали и горизонтальный слайдер, и вертикальный.
Логика проста до нельзя: при клике на кнопки увеличивается или уменьшается счетчик-индекс и, соответственно показывается слайд с этим индексом. При значении счетчика равном крайним границам всего слайдера происходит либо его обнуление, либо установка значения в последний слайд из всего массива слайдов.
Использовали блок try/catch, сделали код универсальным для любого слайдера на странице - это была новая информация для меня, до этого этот блок проходил только в теории, без практического применения.
Для анимации смены слайдов использовали готовую css библиотеку Animated. Очень удобный набор готовых анимаций, причем из исходного файла можно удалить неиспользуемые участки кода, уменьшив тем самым размер файла.
В итоге, выше приведенный код, работает в обоих случаях, с разным количеством передаваемых параметров, без использования параметров по умолчанию.
В итоге доволен пройденными уроками, забегал чуть вперед, пытался сам )) Получалось "мусорнее", но рабочий вариант. Переделывал как по уроку "красиво" и кратко. Считаю, что без собственных потуг толку будет почти ноль.
Следующий урок про отправку форм на сервер, реализацию Drag-and-drop для загрузки картинок на сайт, использование разных обработчиков для разных форм. Следующий пост будет про все это.
Все удачи в ваших начинаниях!
