Разное

Простой слайдер на css: Интересный и одновременно простой слайдер на чистом CSS3 / Хабр

10.07.2023

Содержание

css animation — Простой слайдер на CSS

Задать вопрос

Вопрос задан

Изменён 3 года 6 месяцев назад

Просмотрен 312 раз

Быстрый вопрос, — есть страница, на которой картинки должны меняться по таймеру, за счет наслоения на предыдущую. Вот мой код, но там есть только первая анимация.

.wrapper {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

#slide {
  position: absolute;
  left: -100px;
  width: 100px;
  height: 100px;
  background: blue;
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 5s, 3s;
  animation: slide 0.
 
 5s forwards;
  animation-delay: 5s, 3s;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes slide {
  100% {
    left: 0;
  }
}

@keyframes slide {
  100% {
    left: 0;
  }
}

#slide2 {
  position: absolute;
  left: -100px;
  width: 100px;
  height: 100px;
  background: blue;
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 5s, 3s;
  animation: slide 0.5s forwards;
  animation-delay: 5s, 3s;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes slide2 {
  100% {
    left: 0;
  }
}

@keyframes slide2 {
  100% {
    left: 0;
  }
}

#slide3 {
  position: absolute;
  left: -100px;
  width: 100px;
  height: 100px;
  background: blue;
  -webkit-animation: slide 0.
 
 5s forwards;
  -webkit-animation-delay: 5s, 3s;
  animation: slide 0.5s forwards;
  animation-delay: 5s, 3s;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes slide3 {
  100% {
    left: 0;
  }
}

@keyframes slide3 {
  100% {
    left: 0;
  }
}
<div>
  <img src="http://via.placeholder.com/250x250/33ff99/555555?text=Slide_1" />
  <img src="http://via.placeholder.com/250x250/33ff99/555555?text=Slide_2" />
  <img src="http://via.placeholder.com/250x250/33ff99/555555?text=Slide_3" />
</div>
  • css
  • css-animation
2

Правильная ротация получается благодаря z-index. А всё остальное по времени привязывается к одной переменной

--time. И оказалось, не так и сложно сделать и для большего количества картинок)

:root {
  --time: 3s; /* Время одного пролистывания */
  --qty: 4; /* Количество картинок */
}

. wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  box-shadow: 1px 1px 5px 1px #000;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  left: -100%;
  animation: slide calc(var(--time) * var(--qty)) linear infinite;
  z-index: 0;
}

/* кусок задротства - придется редактировать для каждого кол-ва картинок */
.slide:nth-child(2) { animation-delay: var(--time) }
.slide:nth-child(3) { animation-delay: calc(var(--time) * 2) }
.slide:nth-child(4) { animation-delay: calc(var(--time) * 3) }

@keyframes slide {
  0% { z-index: 10; }
  5% { left: 0; }
  66% { left: 0; }
  100% { left: -100%; }
}
<div>
  <img src="http://via.placeholder.com/250x250/cc0000/fff?text=bubu" />
  <img src="http://via.placeholder.com/250x250/f36700/fff?text=kuku" />
  <img src="http://via.placeholder.
 
 com/250x250/045acf/fff?text=dudu" />
  <img src="http://via.placeholder.com/250x250/004400/fff?text=moo" />
</div>
4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Подскажите простой слайдер с авто прокруткой для каталога файлов — Вопрос от Коля Карнаух #3

Чтобы фото подгружались с материалов каталога файлов, фото нужно будет крепить к материалам с помощью доп поля Изображения.

Тот слайдер, что на примере, установить его можно, только стоит учитывать, что он не адаптивный и будет ломать отображение сайта на мобильных устройствах.

<div>

<ul data-step1=»M1402,800h-2V0h2c0.6,0,1,0.4,1,1V800z» data-step2=»M1400,800h479L771.2,0h2399c0.6,0,1,0.4,1,1V800z» data-step3=»M1400,800H0V0h2399c0.6,0,1,0.4,1,1V800z» data-step4=»M-2,800h3V0h-1c-0.6,0-1,0.4-1,1V800z» data-step5=»M0,800h2021L628.8,0L1,0C0.4,0,0,0.4,0,1L0,800z» data-step6=»M0,800h2400V0L1,0C0.4,0,0,0.4,0,1L0,800z»>

<li>

<div>

<svg viewBox=»0 0 1400 800″>

<title>$IMG1_TITLE$</title>

<defs>

<clipPath>

<path d=»M1400,800H0V0h2399c0. 6,0,1,0.4,1,1V800z»/>

</clipPath>

</defs>

 

<image clip-path=»url(#cd-image-1)» xlink:href=»<?if($IMG_URL1$)?>$IMG_URL1$<?endif?>»></image>

</svg>

</div> <!— .cd-svg-wrapper —>

</li>

 

<li>

<div>

<svg viewBox=»0 0 1400 800″>

<title>$IMG2_TITLE$</title>

<defs>

<clipPath>

<path d=»M1400,800H0V0h2399c0.6,0,1,0.4,1,1V800z»/>

</clipPath>

</defs>

 

<image clip-path=»url(#cd-image-2)» xlink:href=»<?if($IMG_URL2$)?>$IMG_URL2$<?endif?>»></image>

</svg>

</div> <!— .cd-svg-wrapper —>

</li>

 

<li>

<div>

<svg viewBox=»0 0 1400 800″>

<title>$IMG3_TITLE$</title>

<defs>

<clipPath>

<path d=»M1400,800H0V0h2399c0. 6,0,1,0.4,1,1V800z»/>

</clipPath>

</defs>

 

<image clip-path=»url(#cd-image-3)» xlink:href=»<?if($IMG_URL3$)?>$IMG_URL3$<?endif?>»></image>

</svg>

</div> <!— .cd-svg-wrapper —>

</li>

 

<li>

<div>

<svg viewBox=»0 0 1400 800″>

<title>$IMG4_TITLE$</title>

<defs>

<clipPath>

<path d=»M1400,800H0V0h2399c0.6,0,1,0.4,1,1V800z»/>

</clipPath>

</defs>

 

<image clip-path=»url(#cd-image-4)» xlink:href=»<?if($IMG_URL4$)?>$IMG_URL4$<?endif?>»></image>

</svg>

</div> <!— .cd-svg-wrapper —>

</li>

 

</ul> <!— .cd-slider —>

 

<ul>

<li><a href=»#0″>Next</a></li>

<li><a href=»#0″>Prev</a></li>

</ul> <!— . cd-slider-navigation —>

 

<ol>

<li><a href=»#0″><em>Item 1</em></a></li>

<li><a href=»#0″><em>Item 2</em></a></li>

<li><a href=»#0″><em>Item 3</em></a></li>

<li><a href=»#0″><em>Item 4</em></a></li>

</ol> <!— .cd-slider-controls —>

</div> <!— .cd-slider-wrapper —>

 

<script src=»/js/jquery.mobile.custom.min.js»></script>

<script src=»/js/snap.svg-min.js»></script>

<script src=»/js/main.js»></script> 

<!— Resource jQuery —>

<link rel=»stylesheet» href=»css/reset.css»> <!— CSS reset —>

<link rel=»stylesheet» href=»css/style.css»> <!— Resource style —>

<script src=»js/modernizr.js»></script> <!— Modernizr —>

слайдер

Pure CSS – доказательство концепции | Дэмиен Карбери

Опубликовано:

Слайдеры не рекомендуются, но некоторые клиенты требуют их. Мне было интересно, можно ли создать слайдер, который использует только переходы CSS и анимацию. Вот небольшое доказательство концепции.

Напишите немного html

Я начал с простого html — с 4 div в div-оболочке. Внутренние div будут слайдами (я помещаю изображение в каждый).

Затем я создал анимацию, используя @keyframes , начиная с непрозрачности 0 (полностью прозрачный) и изменяя непрозрачность до 1 (полностью видимый/непрозрачный). В конце переворачиваю.

Если я хочу, чтобы слайд отображался в общей сложности 5 секунд, то 1 секунда составляет 20% этого периода.

Итак, для этого простого примера код @keyframes :

 @keyframes slide_animation {
  0% {opacity: 0;} /* Начать постепенное появление */
  20% {opacity: 1;} /* Полностью виден через 1 секунду. */
  80% {opacity: 1;} /* Начало затухания. */
  1000% {opacity: 0;} /* Снова исчезает через 1 секунду.  */
}

Для каждого слайда я просто задерживаю начало его анимации на дополнительные 5 секунд (используя animation-delay ), но я смог запустить анимацию только один раз.

Infinite

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

Итак, я обновил свой html-документ новыми процентами для анимации:

 @keyframes slide_animation {
  0% {непрозрачность: 0;}
  5% {непрозрачность: 1;}
  25% {непрозрачность: 1;}
  30% {непрозрачность: 0;}
}

Если 100% разделить на 4, получится 25%. Затухание анимации составляет от 25% до 30%, чтобы затухание перекрывало появление, чтобы вы никогда не оставались с пустой областью.

Выберите свою анимацию

Сначала я просто появлялся (непрозрачность от 0 до 1), а затем исчезал в конце. я добавил 9Масштаб 0015 (1,1) до масштаба (0,0) , чтобы он уменьшался при исчезновении. Я уверен, что вы могли бы добавить другие CSS-анимации.

Работа в обратном направлении к коду

Теперь, когда у меня был работающий статический HTML, мне пришлось работать в обратном направлении, чтобы написать PHP-код, в котором процентные точки останова анимации будут вычисляться динамически.

Начальная конфигурация — это разметка для слайдов, время перехода (в секундах) и количество времени, в течение которого слайд будет отображаться.

Полное прохождение слайд-шоу равно сумме времени затухания и показа, умноженной на количество слайдов. Затем я рассчитываю процент времени окончания показа слайда, а также процент затухания.

Затем я создаю динамический CSS и разметку. Я очень доволен этим.

Код

Посмотреть код на Gist.

Демонстрация

Похожие сообщения

Взаимодействие с читателями

Как сделать полностью доступную карусель только на CSS | Дженнифер Вьерцох

Без JavaScript! Никаких плагинов jQuery!

Jennifer Wjertzoch

·

Читать

Опубликовано в

·

5 минут чтения

·

18 октября 2021 г.

Photo by Oneisha Lee on Unsplash

Прежде всего, что такое карусель? Карусели показывают набор элементов один за другим. Также известны как «слайд-шоу» и «слайдеры». Часто они используются для размещения большего количества контента на веб-сайте, который в противном случае не поместился бы. ».

— Брэд Фрост

Поиск недоступных каруселей в Интернете — обычное дело. Более половины каруселей, доступных в Интернете, имеют несколько проблем с доступностью. Часто они недоступны, потому что люди не придают большого значения доступности. Часто это также связано с тем, что существует так много факторов и требований доступности, что некоторые из них упускаются.

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

Не все карусели одинаковы с точки зрения реализации и функций. Но некоторые общие факторы идут не так с доступностью. Некоторые из распространенных проблем доступности в каруселях:

  1. Почти каждая карусель имеет различную структуру. Таким образом, также нет стандартизации для программ чтения с экрана, помогающих ориентироваться.
  2. Многие пользователи средств чтения с экрана не могут определить, когда их виртуальный курсор входит в карусель или покидает ее. Это приводит к тому, что они не знают, существует ли он вообще и как выйти.
  3. Очень часто элементы управления в слайд-шоу имеют слишком низкую контрастность или малы по сравнению с содержимым, которое они накладывают. Это затрудняет их использование пользователями.
  4. Если слайды карусели вращаются, пользователи экрана и клавиатуры могут запутаться. Им сложно понять содержание, которое постоянно меняется впереди. Автоповорот также может вызвать проблемы у пользователей с когнитивными расстройствами.

Для исследования я создал несколько прототипов на трех готовых слайдерах:

  1. UiKit Slider or Slideshow — Поставляется в комплекте и имеет небольшой вес. Но до этого я использовал только более мелкие вещи из UiKit, такие как макет кладки или аккордеон. Карусель — это уже нечто большее. Кроме того, не предусматривалась клавиатурная навигация и доступ через вкладку.
  2. Swiper Slider — Эта карусель может многое сделать и позволяет импортировать только ядро ​​swiper и фактические компоненты, которые вам нужны. Эта карусель полностью доступна.
  3. a11y-slider — a11y-slider полностью создан с помощью JavaScript и его сложно настроить. Но что меня вдохновило, так это возможность полностью пропустить карусель.

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

Шаг 1 — Настройка базовой структуры HTML/CSS

Настройка базовой структуры HTML/CSS

Шаг 2 — Добавление привязки прокрутки

С помощью привязки прокрутки CSS вы можете зафиксировать элемент в определенной позиции во время прокрутки. Это обеспечивает отличный пользовательский опыт при взаимодействии с вашей каруселью.

Scroll-snap уже имеет хороший браузерный дистрибутив.

caniuse.com

Все, что нам нужно для функционирующей карусели, уже находится в этой области: 

 .slides { 
  overflow-x: scroll; 
 тип привязки прокрутки: x обязательно; 
 поведение прокрутки: гладкое;  
 }

Давайте посмотрим, что они делают в деталях: 

 overflow-x: scroll;

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

 тип прокрутки: x обязательно;

x
Позволяет привязываться к определенным точкам макета при прокрутке этих точек.

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

Добавьте к элементу слайдов следующее: 

 .slides-item { 
  scroll-snap-align: start; 
  }

Давайте посмотрим, что он делает в деталях: 

 scroll-snap-align: start;

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

Add Scroll-Snap

Шаг 3 — Удаление полосы прокрутки с помощью CSS

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

  // Скрывает полосу прокрутки в Firefox  
 .slides { 
 scrollbar-width: none; 
 }  // Скрывает полосу прокрутки в браузерах с поддержкой WebKit и Blink  
 .slides::-webkit-scrollbar { 
 display: none; 
 }
Удаление полосы прокрутки с помощью CSS

Шаг 4. Сделайте карусель доступной

Важным аспектом разработки была доступность.

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

Чтобы сделать карусели более эффективными, следует помнить о некоторых моментах:

  1. Tabindex
    Всеми функциями, включая навигацию между элементами карусели, можно управлять с клавиатуры через «фокус».
    Добавьте значение 0 в tabindex, это поместит элемент в порядок навигации по умолчанию. Это позволяет элементам, которые обычно не фокусируются (например,
  2. Aria-Label
    Добавить общий aria-label (например, aria-label="carousel" ) для элемента-обертки и слайдов, поэтому пользователи программ чтения с экрана точно знают, как настроена карусель и как она работает.
    Если метка aria не установлена, элемент HTML использует свое текстовое содержимое для более подробного описания.
  3. Пропустить содержимое
    Мы также позволяем программам чтения с экрана пропускать карусель с помощью скрытой ссылки «пропустить» при фокусе клавиатуры. В этом случае небольшое наложение перекрывает карусель и дает возможность перейти к следующему элементу.
  4. Не использовать автовоспроизведение
    Если карусель вращается, у пользователей могут возникнуть трудности с чтением содержимого каждого слайда до его изменения. В результате доступ с клавиатуры к каруселям и их содержимому может стать затруднительным или невозможным. Об изменении содержимого часто не сообщается пользователям программ чтения с экрана.
  5. Цветовой контраст
    Всегда проверяйте цветовой контраст и размер текста, отображаемого на слайде. Кроме того, чтобы пользователи могли подключаться к элементам управления, отображайте статус для пользователя во время фокусировки или наведения мыши.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *