Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

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

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio

Eche un vistazo a continuación

1 de 15 Anuncio

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

Descargar para leer sin conexión

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

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

Anuncio
Anuncio

Más Contenido Relacionado

Similares a Cлайдер на CSS | Odessa Frontend Meetup #16 (20)

Más de OdessaFrontend (20)

Anuncio

Más reciente (20)

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. Спасибо за внимание!

×