Карусель html css код

Создание карусели с помощью CSS Scroll Snap и JavaScript

Это руководство поможет вам создать адаптивную карусель с помощью свойства CSS scroll-snap и очень небольшого количества JavaScript для навигации. Вы можете использовать ее для демонстрации товаров, в качестве галереи или для своих отзывов — как в примере, приведенном в этом руководстве. Итак, вот что мы будем создавать.

На самом деле это просто горизонтальный слайдер, но когда вы прокручиваете его, он «перещелкивается» (автоматически регулирует положение контейнера прокрутки), чтобы обеспечить отображение всего элемента, ведя себя как карусель. Вы также можете использовать стрелки для отображения следующего и предыдущего элементов, для этого потребуется JavaScript. Чтобы продолжить, вам потребуется иметь базовые знания HTML, CSS и JavaScript. В процессе изучения этого руководства вы узнаете о свойствах привязки прокрутки CSS. Давайте начнем.

Настройка

Создайте пустой HTML-документ и назовите его index.html . Добавьте базовый скелет HTML. Если вы используете Visual Studio Code, все, что вам нужно сделать, это ввести «!» и нажать Enter. Вы получите следующее.

В этой демонстрации используется шрифт Noto Sans. Давайте встроим этот шрифт из Google Fonts. Добавьте приведенную ссылку на CDN под тегом title, чтобы встроить обычный и курсивный стили этого шрифта.

Создайте таблицу стилей и назовите ее style.css . Свяжите таблицу стилей с HTML-документом под ссылкой на CDN Google fonts, используя

Для использования в этой демонстрации я загрузил три портретных изображения с Pexels и обрезал их под квадрат. Вы же можете добавить свои собственные. Назовите их testimonial1.jpg , testimonial2.jpg и testimonial3.jpg .

Создание базового скроллера

Сначала давайте создадим простой горизонтальный скроллер с тремя элементами с такой же шириной, как у контейнера прокрутки.

HTML

Добавьте эту разметку в тег body в ранее созданном HTML-файле:

Здесь div testimonials действует как оболочка, внутри которой располагается горизонтальный scroller , а затем три элемента div .

CSS

В файле style.css начнем с некоторых общих стилей для всех элементов.

* < margin: 0; padding: 0; box-sizing: border-box; >Добавьте приведенные ниже стили к элементу body. body

Ограничьте ширину оболочки testimonials примерно до 800 пикселей и отцентрируйте ее.

Добавьте следующие базовые стили, чтобы увидеть, как работает скроллер.

При этом вы можете увидеть продемонстрированную ниже ​​секцию горизонтальной прокрутки.

Привязка прокрутки

С помощью привязки прокрутки CSS можно принудительно установить положение прокрутки (плавное перемещение в заданное положение), как только пользователь прекратит прокрутку. Это работает за счет применения двух основных свойств — scroll-snap-type и scroll-snap-align .

Свойство scroll-snap-type применяется к родительскому контейнеру (в нашем случае это div scroller ). Оно принимает два аргумента — направление привязки ( x | y | both ) и поведение привязки ( mandatory | proximity ). Нам нужно использовать x для направления, потому что мы создаем горизонтальную прокрутку. Что касается поведения, mandatory означает, что браузер должен привязываться к позиции, но proximity менее строг. Мы будем использовать mandatory .

Свойство scroll-snap-align применяется к дочерним элементам. Оно определяет точку привязки. Свойство принимает один или два аргумента для направлений x и / или y ( none | start | end | center ). В нашем случае это свойство может иметь любое значение кроме none , потому что наши элементы составляют 100% ширины родительского контейнера.

Добавьте приведенные ниже свойства для блоков scroller и item .

Это все, что вам нужно для магии! Теперь проверьте карусель в браузере и прокрутите ее по горизонтали. Вы заметите, что браузер строго привязывается к отображению всего элемента, как только вы прекращаете прокрутку. Таким образом достигается основное поведение карусели.

Добавление контента

Давайте добавим элементам контент.

HTML

 
  
 
Eu rebum molestie per. No nostrud imperdiet abhorreant qui, hinc incorrupte vix ad. Vel id aliquip oblique. Primis feugait sit an, brute illud convenire duo ea. Graece tempor eripuit sed in.
 Elise 
 
 
  
 
Vitae pericula maluisset ut mei, pro eleifend gubergren eu. Et his brute graeci. Affert ponderum ei vel, dolorum accumsan ea has. Sea oblique salutatus ei, simul lucilius pri et. Errem melius temporibus ut eos
 John 
 
 
  
 
Ne est virtute indoctum, quaeque vituperata cum ut. Te nisl quaeque pri. Vix ex autem latine, mel ne nobis scaevola, ei est dolor utinam commune. Pri unum doctus in, cu primis pertinax eos.
 Imani 
 
 

CSS

.testimonials < /* Здесь существующие стили */ padding: 15px; text-align: center; >.item < /* Здесь существующие стили */ background-color: white; /* Change the value to white */ margin-bottom: 10px; padding: 0 50px; >.item img < margin: 15px auto -60px; width: 120px; height: 120px; border: solid 4px #ffffff; border-radius: 60px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 2; >.card < background-color: rgb(237, 242, 247); padding: 80px 40px 40px; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 1; >.card p < font-style: italic; line-height: 1.6; >.card span

Источник

25+ Beautiful CSS Carousels (Free Code + Demos)

Enjoy this 100% free and open source collection of HTML and pure CSS carousel code examples. This list includes responsive carousels; both horizontal and vertical.

1. Pure Css Carousel

2. CSS Carousel

A multi-item card carousel in Vue. It was fun thinking about how this should be viewed from the perspective of a component. It basically takes a window size and increases/decreases the pagination window on each click, which updates a style which translates the images. Values are hardcoded.

3. CSS-Tricks Card Carousel

4. Multidirectional Email Carousel

Carousel type build that scrolls over large background image using directional arrows. Unsupported environments will display a fallback static image. 14/04/2020 — Quick fix to add html entity arrows as placeholder images were gone.

5. [CSS] Infinite Autoplay Carousel

Useful for startup landing pages where you need to display brand partners and other cool logos or whatever. Enjoy. 🙂

6. CSS Carousel — Pure CSS Carousels 🎪🐎

Pure CSS «carousel»(heavy emphasis on the quotes there) Leveraging use of how elements behave in the DOM in combination with features of CSS makes implementing a pure CSS «carousel» relatively trivial. Read more in a blog post here Enjoy!

7. CSS Carousel With Keyboard Controls

Not recommended for production use. But it seemed like a fun idea to see how far I could take a form with radio inputs.

8. CSS Vertical Carousel Animation

9. Pure CSS Carousel

10. Pure CSS Carousel

11. Pure CSS Slider

12. Pure CSS3 Text Carousel

13. CSS Carousel

14. Basic Vertical CSS Carousel

15. Full Css Carousel With Text Animation

16. Pure Css Carousel

17. Testimonial Slider Pure CSS

18. Pure CSS Carousel That Preserves History

An attempt to create a CSS only carousel control that doesn’t require the user to click the back button for every interaction they make

19. Pure CSS Image Slider

20. Testimonial (Client-review)

21. Untitled

Horizontal Carousels

1. CSS Carousel

A multi-item card carousel in Vue. It was fun thinking about how this should be viewed from the perspective of a component. It basically takes a window size and increases/decreases the pagination window on each click, which updates a style which translates the images. Values are hardcoded.

2. CSS Carousel — Pure CSS Carousels 🎪🐎

Pure CSS «carousel»(heavy emphasis on the quotes there) Leveraging use of how elements behave in the DOM in combination with features of CSS makes implementing a pure CSS «carousel» relatively trivial. Read more in a blog post here Enjoy!

Источник