Генератор карусели (слайдера) на CSS scroll-snap
Вставьте изображения и выберите, сколько видно сразу. Прокрутка выполняется самим браузером через scroll-snap; скрипт лишь двигает стрелки.
Как пользоватьсяЛёгкая карусель, которая листается пальцем
Доступно на: 
Генератор карусели (слайдера) на CSS scroll-snap: для чего нужен
Карусель фото или карточек распространена на сайтах торговли, но библиотеки слайдеров тяжёлые и иногда подвешивают прокрутку на телефоне.
Этот генератор использует CSS scroll-snap, который привязывает каждый элемент с помощью встроенной прокрутки браузера: перетаскивание пальцем получается плавным, работает с трекпадом и клавиатурой, а JavaScript почти нет. Выберите, сколько элементов видно сразу на компьютере и телефоне (в том числе один и кусочек следующего, чтобы показать, что можно листать), отступ и скругление углов. Без автоматического вращения, которое мешает чтению и доступности (WCAG 2.2.2).
Как пользоваться
- Вставьте адреса изображений.
- Выберите, сколько видно сразу, и отступы.
- Скопируйте код и вставьте на сайт.
Когда использовать
- Витрина товаров.
- Фото работ и портфолио.
- Карточки отзывов или услуг.
Частые вопросы
Почему scroll-snap, а не библиотека?
Scroll-snap использует встроенную прокрутку браузера: перетаскивание на телефоне получается плавным, как в Instagram, работает с трекпадом и клавиатурой и ничего не весит. Библиотеки слайдеров обычно добавляют десятки КБ JavaScript ради того же.
Листается ли карусель сама?
Нет, намеренно. Карусель, которая крутится сама, мешает чтению и является проблемой доступности (WCAG 2.2.2 требует возможности остановить то, что движется дольше 5 секунд). Кто хочет увидеть больше, перетаскивает или использует стрелки.
Можно ли использовать с текстовыми карточками?
Да. Замените изображения любым содержимым внутри каждого элемента списка; размер и привязка останутся теми же.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.