Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Как сделать слайдер на CSS ?
Обычное подключение слайдера
Подпись
Подпись
Подпись
Что такое CSS Scroll Snap?
CSS Scroll Snap - это CSS модуль
обеспечивающий выравнивание контента
внутри контейнера со скро...
Scroll Snap
• scroll-snap-type
• scroll-snap-align
• scroll-snap-stop
• scroll-padding
• scroll-margin
Свойства и синтаксис Scroll Sna...
• scroll-snap-type: “x | y” “mandatory | proximity”;
• scroll-padding: auto;
Родительский элемент:
• scroll-snap-align: “start | center | end”;
• scroll-snap-stop: “normal | always”
• scroll-margin: auto;
Дочерний элемент:
Gallery
ПодписьПодпись
Browser support
https://vladchievers.github.io/css-slider/
Подпись
Источники:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
https://habr.com/ru/post/498456/
https://blog....
Спасибо за внимание!
Cлайдер на CSS | OdessaFrontend Meetup #16
Upcoming SlideShare
Loading in …5
×

0

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Cлайдер на CSS | OdessaFrontend 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. Спасибо за внимание!

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

Views

Total views

109

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×