Рабочий дневник: День 403 Как я слайдер делал 🔧 На работе попалась секция, которую многие называют каруселью. Название пришло с детской площадки, где качели сменяют друг друга по кругу. Ваш КЭП. В вебе слайды так же «крутятся» в одном контейнере и показывают контент по очереди. Хотя формально слайдер и карусель это разные вещи. Карусель обычно зациклена: элементы крутятся бесконечно. Слайдер это про листание, и у него есть конец, без возврата к первому элементу. ✋ Свой первый слайдер я верстал руками, но быстро понял: это путь в никуда. Уже тогда были готовые решения, и я не нашёл ничего лучше Swiper. Увы, но у него есть проблема: слишком раздутый API и свои стили. Те, кто пытался подогнать компоненты Bootstrap под свою систему дизайна, меня поймут. В этот раз хотелось чего-то попроще, и внезапно я наткнулся на Embla Carousel. В отличие от монолитного Swiper в ~50 КБ, Embla решает проблемы за 6 КБ. ❓ Тут возникает резонный вопрос: а почему бы не написать самому на 1 КБ? У нас же есть GPT! Есть, но тогда придётся много логики тащить руками. Например, затухание, как отпускаешь палец. Это уже физика, requestAnimationFrame и обработка touchstart/move/end. Плюс ещё mousedown/move/up и pointer events. Ещё важный момент: Embla состоит из модулей. Благодаря пакету embla carousel wheel gestures можно добавить прокрутку колёсиком мыши по горизонтали. 🔫 Если такое делать руками, то надо перехватывать wheel, переводить deltaY в смещение по X, дабы не сломать скролл страницы, делать throttle или debounce. Еще всё это нужно подружить со snap и инерцией карусели. В итоге простая задача про вёрстку слайдера превращается в целый эпик. Мы этого хотели? Крч, в следующий раз не думайте, а берите Embla для карусели. Я заресерчил :) 📊 #статистика в IT 1563д | 4732ч