На сегодняшний день сложно себе представить сайт, на котором не будет слайдера. И, для его подключения, используется JS код, а иногда еще и с дополнительной библиотекой. Но Влад Цугульский рассказывает как написать свой простой слайдер на чистом СSS и при этом не нагружая сайт лишним кодом.

1. Как сделать слайдер на CSS ?

2. Обычное подключение слайдера
Подпись
Подпись

3. Подпись

4. Что такое CSS Scroll Snap?
CSS Scroll Snap - это CSS модуль
обеспечивающий выравнивание контента
внутри контейнера со скроллом. Он
принудительно устанавливает конечную
позицию скролла после выполнения прокрутки.

5. Scroll Snap

6. • scroll-snap-type
• scroll-snap-align
• scroll-snap-stop
• scroll-padding
• scroll-margin
Свойства и синтаксис Scroll Snap.

7. • scroll-snap-type: “x | y” “mandatory | proximity”;
• scroll-padding: auto;
Родительский элемент:

8. • scroll-snap-align: “start | center | end”;
• scroll-snap-stop: “normal | always”
• scroll-margin: auto;
Дочерний элемент:

9. Gallery

11. ПодписьПодпись

12. Browser support

13. https://vladchievers.github.io/css-slider/
Подпись

14. Источники:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
https://habr.com/ru/post/498456/
https://blog.logrocket.com/how-to-use-css-scroll-snap/
https://css-tricks.com/how-to-make-a-css-only-carousel/

15. Спасибо за внимание!