Successfully reported this slideshow.
Your SlideShare is downloading. ×

Cлайдер на CSS | Odessa Frontend Meetup #16

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 15 Ad

Cлайдер на CSS | Odessa Frontend Meetup #16

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

More from OdessaFrontend (20)

Advertisement

Recently uploaded (18)

Cлайдер на CSS | Odessa Frontend Meetup #16

  1. 1. Как сделать слайдер на CSS ?
  2. 2. Обычное подключение слайдера Подпись Подпись
  3. 3. Подпись
  4. 4. Что такое CSS Scroll Snap? CSS Scroll Snap - это CSS модуль обеспечивающий выравнивание контента внутри контейнера со скроллом. Он принудительно устанавливает конечную позицию скролла после выполнения прокрутки.
  5. 5. Scroll Snap
  6. 6. • scroll-snap-type • scroll-snap-align • scroll-snap-stop • scroll-padding • scroll-margin Свойства и синтаксис Scroll Snap.
  7. 7. • scroll-snap-type: “x | y” “mandatory | proximity”; • scroll-padding: auto; Родительский элемент:
  8. 8. • scroll-snap-align: “start | center | end”; • scroll-snap-stop: “normal | always” • scroll-margin: auto; Дочерний элемент:
  9. 9. Gallery
  10. 10. ПодписьПодпись
  11. 11. Browser support
  12. 12. https://vladchievers.github.io/css-slider/ Подпись
  13. 13. Источники: 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/
  14. 14. Спасибо за внимание!

×