Html карусель без js

Как создать карусель используя только HTML и CSS

От автора: недавно я работал с сайтом, CMS которого имела слегка неполный функционал. JavaScript был отключен, и я мог добавлять только свой HTML и CSS код. Дизайн, над которым я работал, включал в себя карусель. У меня было пару идей, как написать ее, используя CSS-анимации и свойство transform.

Но в таком случае карусель автоматически прокручивалась, и отсутствовало взаимодействие с пользователем, что было не совсем тем, что я искал. В конце концов, я пришел к мысли использовать для прокрутки наших элементов карусели абсолютное позиционирование и псевдокласс :target для изменения свойств z-indexи opacity.

Структура

Структура нашей карусели будет примерно такой: у нас есть главный блок div.carousel-wrapper задающий размер карусели. Внутри этого блока-оберктки у нас элементы span.hidden-target с уникальными идентификаторами, которые будут использоваться для управления элементами карусели. А также внутри div.carousel-wrapper помещаются блоки div.carousel-item, в которых будет находиться основной контент.

Каждый блок div.carousel-item содержит внутри себя парочку тегов и две ссылки a.arrow-prev и a.arrow-next, которые мы будем использовать для ротации слайдов.

Так как наши слайды будут позиционированы абсолютно (мы можем поместить их сверху друг за другом), то необходимо вручную установить высоту для блока div.carousel-wrapper, и есть смысл задать высоту строго через атрибут style. Мы попытаемся максимально облегчить CSS код, но чтобы потом использовать нашу карусель повторно и сделать ее масштабируемой, некоторые свойства придется прописать строго в тегах.

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Также я использовал атрибут style для установки заднего фона у блоков div.carousel-item чтобы сделать их немного поживее. Запишем это немного позже, чтобы наша разметка выглядела читаемо.

Источник

Как создать карусель, используя только HTML и CSS без JavaScript!

В последнее время мы работали над сайтом, который использует CMS, что немного ограничивает. Мы можем добавить свой собственный HTML и CSS на сайт, но не JavaScript.

В проектах, с которыми мы работали, была карусель. У нас были идеи о том, как мы можем сделать эту работу, используя CSS-анимации и transform property, но это дало бы карусель, прокручивающуюся автоматически и не разрешающую пользовательский ввод, что мам не было нужно. Немного подумав, мы приняли решение, которое использует абсолютное позиционирование и :target псевдо-селектор для изменения z-index и opacity нашей карусели, чтобы циклировать через них.

Структура нашей карусели выглядит примерно так: у нас есть главный div.carousel-wrapper, который дает нашей карусели размер. Внутри нашей оболочки, у нас есть span.hidden-target элементы с уникальными идентификаторами, которые действуют в качестве мишеней для наших пунктов управления карусели и div.carousel-item элементов, которые содержат контент каждого из пунктов карусели.

Каждый из div.carousel-item элементов будет иметь контент, и две ссылки, a.arrow-prev и a.arrow-next, который мы используем для цикла между элементами карусели.

Потому что наши отдельные элементы карусели будут position: absolute (мы можем сложить их на вершине друг друга), мы должны установить высоту div.carousel-wrapper вручную. Мы собираемся попытаться разгрузить CSS к нашей внешней таблицы стилей, но некоторые из пунктов мы должны будем написать, чтобы сделать нашу карусель используемой и масштабируемой.

Мы также используем CSS, чтобы установить фоновое изображение из двух наших div.carousel-item элементов, чтобы сделать их более яркими, но мы оставим это ниже, чтобы наша разметка была более читаемой.

  
   
 
Item 1
 
Content goes here.
  
Item 2
 
Content goes here.
 
 
Item 3
 
Content goes here.
 
 

Вот и весь HTML. Он удивительно легкий. В CSS (SCSS, в данном случае), вот где происходит волшебство.

У вас есть карусель, которая полностью функциональна и на 100% состоит из HTML и CSS! Мы создали карусель с тремя элементами, но вы можете продолжать добавлять элементы, убедитесь, что вы добавляете больше целевых элементов, и связываете ваши ссылки правильно.

/* Here's where our carousel begins, with the main wrapper being relatively positioned, so that our absolutely positioned items are in the right place. */ .carousel-wrapper < position: relative; /* Our absolutely positioned carousel items span the width and height of its parent. We're making them transparent by default so that they fade in when we cycle through them using the arrow links. */ .carousel-item < position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 25px 50px; opacity: 0; transition: all 0.5s ease-in-out; /* Did you notice the 50px left, right padding up above? It's so we can position our arrow links! Each one will be 50px wide. Also, I'm using empty links with a background image so that the links look like arrows. Make sure you swap out that URL with an actual URL so that your arrow links aren't just transparent rectangles. */ .arrow < position: absolute; top: 0; display: block; width: 50px; height: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); background: url("/carousel-arrow-dark.png") 50% 50% / 20px no-repeat; /* Let's put our arrow to go back on the left. */ &.arrow-prev < left: 0; >/* And our arrow to go forward on the right. Since I'm using the same arrow image for both my arrows, I'm rotating this one by 180 degrees so that it points in the right direction */ &.arrow-next < right: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); >> /* I really like how these carousel items look on a dark image background, so if a .carousel-item div has the class 'light', we'll make its text color white, and use a white arrow instad of a dark gray one. Again, make sure this arrow image exists somewhere */ &.light < color: white; .arrow < background: url("/carousel-arrow-light.png") 50% 50% / 20px no-repeat; >> /* Let's use using some media queries to resize the arrows on smaller devices.*/ @media (max-width: 480px) < .arrow, &.light .arrow < background-size: 10px; background-position: 10px 50%; >> > /* Let's set our jump link targets display: none; so that we're not making the browser jump to the top of the carousel whenever a user clicks on one of our arrow links. This attribute selector will target any element whose id starts with 'target-item'. */ [id^="target-item"] < display: none; >/* So, up above we made all our carousel items transparent, which means that on page-load, we'd have a big empty box where our carousel should be. Let's set our first item's opacity to 1 so that it displays instead. Also, we're setting its z-index to 2, so that it's positioned on top of the other carousel items. */ .item-1 < z-index: 2; opacity: 1; >/* But we don't want the first item to ALAWYS be opacity: 1; otherwise it would peek through when cycling between items two and above. */ *:target ~ .item-1 < opacity: 0; >/* . but if #target-item-1 is targeted, well we do want the first item to show up, so we're selecting it with the ~ sibling selector and setting its opacity to 1 again :-) */ #target-item-1:target ~ .item-1 < opacity: 1; >/* If any other target-item-# is targeted, let's select it using the sibling selector, make it fade in, and place it on top of the pile using z-index: 3. Here's where you'd add more target items if your carousel has more than three items. It might be worth adding like 10 items right off the bat. */ #target-item-2:target ~ .item-2, #target-item-3:target ~ .item-3 < z-index: 3; opacity: 1; >>

Источник

Как создать карусель на чистом CSS

От автора: в данном уроке будет показано создание карусели на чистом CSS. Здесь нет JavaScript здесь вообще! Нет плагинов jQuery. Нет хаков. Просто пара новых CSS-свойств, с которыми я экспериментировал, а также немного базового HTML.

Хорошо, чтобы начать, нам нужно сосредоточиться на разметке. Дизайн включает в себя левый блок навигации, состоящий из изображений, и большую галерею изображений справа, которая позволяет нам прокручивать каждое изображение в отдельности. Нам также понадобится оболочка, чтобы организовать макет:

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

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

После сохранения изображений с помощью диспетчера ресурсов CodePen я начал добавлять URL-адреса в элемент nav:

Видите, что href каждой из этих ссылок указывает на идентификатор? Это потому, что если мы снова посмотрим демонстрацию, то увидим, что нам нужно иметь возможность кликнуть изображение, а затем мы хотим, чтобы в галерее справа отобразилась увеличенная версия.

Итак, теперь мы можем начать добавлять эти изображения и в большую галерею…

Отлично. Следующая забавная часть: стилизация этого. Мы можем использовать макет сетки для родительского .wrapper и установить некоторые интеллектуальные значения по умолчанию для элемента img:

Пока что у нас отсортирован макет и настроены ссылки. Далее, давайте учтем переполнение за пределы нашей оболочки, и обеспечим, чтобы навигация и галерея были прокручиваемы:

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

Далее, давайте сосредоточимся на снимке каждого изображения в галерее. Для этого нам нужно использовать свойства scroll-snap-type и scroll-snap-align следующим образом:

Теперь попробуйте снова прокрутить галерею с правой стороны:

У нас есть довольно крутая карусель! Теперь все, что нам нужно сделать, это привести в порядок дизайн, потому что изображение галереи занимают не всю высоту экрана. Для этого мы можем использовать object-fit и задать для каждого изображения min-height с помощью единиц измерения vh:

Теперь изображения большой галереи всегда будут занимать полный размер экрана и будут масштабироваться по ширине и высоте. Давайте продолжим и займемся стилем маленьких изображений навигации:

Сначала я сделал эту маленькую навигацию похожей на карусель, но это было действительно странно. Сейчас просто используется поведение scroll по умолчанию. Однако в приведенной выше демонстрации попробуйте кликнуть изображение. Заметьте, как мы сразу переходим к изображению в карусели? Было бы хорошо, если бы мы могли немного анимировать этот переход — и мы можем!

Свойство CSS scroll-behavior очень удобно для этого:

Отлично, правда? Еще одна крошечная деталь, которую мы могли бы здесь изменить, это добавить фильтр к элементам навигации, чтобы они стали черно-белыми, а затем анимировать его при наведении:

Я уверен, что мы могли бы сделать намного больше, но я думаю, что уже очень хорошо!

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

Вот и все! Теперь у нас есть карусель, которая чертовски хороша для прогрессивного улучшения, и это означает, что нам не нужно загружать библиотеку JavaScript или писать больше кода, чем нам действительно нужно.

Делаем карусель адаптивной…

Давайте сделаем еще один шаг вперед и добавим адаптивные функции. Мы хотим изменить порядок сетки, переместив все текущие стили в медиа-запрос, который активируется только на больших экранах.

Возможно, вы захотите открыть эту демонстрацию в новой вкладке и уменьшить / увеличить размер окна браузера, чтобы увидеть изменения:

Если вы загрузите эту демонстрацию на мобильном устройстве, вы должны увидеть, как раскладка переключается между двумя режимами. Это делается с помощью одного медиа-запроса для элемента .wrapper. Обратите внимание, что мы используем Sass:

Источник