Содержание

Как сделать слайдер с помощью animation и keyframes? HTML и CSS

Вопрос задан

Изменён 1 год 2 месяца назад

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

Слайдер из 8 картинок. Нужно, чтоб автоматически каждая картинка 3 секунды стояла на месте и листалась в течение 2 секунд. И так 8 раз. Здесь нужно правильно прописать код
@keyframes slider, но не знаю как правильно.

<div>
    <figure>
        <img src="static/1.jpg">
        <img src="static/2.jpg">
        <img src="static/3.jpg">
        <img src="static/4.jpg">
        <img src="static/5.jpg">
        <img src="static/6.jpg">
        <img src="static/7.jpg">
        <img src="static/8.jpg">
    </figure>
</div>
#slider{
    overflow: hidden;
    width: 800px;
    height: 500px;
    border: 2px solid rebeccapurple;
    margin: 0 auto;
}
#slider figure{
    position: relative;
    width: 800%;
    margin: 0;
    left: 0;
    animation: 40s slider infinite;
}
#slider figure img{
    float: left;
    width: 20%;
}
@keyframes slider{
    0% { left: 0; }
    20% { left: 0; }
    33.
 
 3% { left: -100%; }
    53.3% { left: -100%; }
    66.6% { left: -200%; }
    86.6% { left: -200%; }
    66.6% { left: -300%; }
    79.9% { left: -300%; }
    100% { left: 0; }
}
  • html
  • css
  • анимация
  • слайдер

Получилось. 3 секунды картинка стоит на месте, за 2 секунды перелистывается.

3 / 40 x 100 = 7.5

2 / 40 x 100 = 5

0% + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 = 100%

Поправлены два селектора CSS на следующее:

#slider figure img
{
    float: left;
    width: 800px;
}
@keyframes slider
{
    0% { left: 0; }
    7.5% { left: 0; }
    12.5% { left: -100%; }
    20% { left: -100%; }
    25% { left: -200%; }
    32.5% { left: -200%; }
    37.5% { left: -300%; }
    45% { left: -300%; }
    50% { left: -400%; }
    57.5% { left: -400%; }
    62.5% { left: -500%; }
    70% { left: -500%; }
    75% { left: -600%; }
    82.5% { left: -600%; }
    87.5% { left: -700%; }
    95% { left: -700%; }
    100% { left: 0; }
}

1

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

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

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

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

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

Почта

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

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

Почта

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

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как сделать простой слайдер изображений с HTML, CSS и jQuery

Слайд-шоу, слайдеры изображений, волшебные ящики для смены картинок: как бы вы их ни называли, шаблон используется во всем Интернете, так что почти на каждом сайте есть такой. Если вы веб-разработчик, придет время, когда вам, возможно, придется создать его самостоятельно. Имея это в виду, давайте посмотрим, как мы можем создать простой слайдер изображений, используя HTML, CSS и jQuery.

HTML

Мы начнем с создания элемента контейнера, который имеет container класса. Внутри этого лежат наши образы. Изображения обернуты тегами div, поэтому слайды можно превратить в ссылки, или контент, отличный от изображений, можно использовать в качестве слайда. Первый контейнерный div имеет встроенный стиль, который гарантирует, что первое изображение в слайдере будет видно при загрузке страницы. Есть также два элемента кнопки, которые используются для ручного переключения между слайдами по запросу пользователя.

CSS

Здесь мы устанавливаем ширину ползунка изображения, элементов контейнера и изображений внутри них. Важно отметить, что все наши контейнерные элементы настроены для display: none; , Если бы они не были, все наши изображения были бы видны одновременно. Мы будем использовать JavaScript, чтобы установить контейнер div для display: inline-block; в то время как остальные остаются скрытыми.

JavaScript

Для начала нам нужно определить несколько важных переменных. Первая переменная – currentIndex , и она установлена ​​в 0. Вторая переменная – это items , которая установлена ​​в $('.container div') . Это вернет список контейнерных элементов с изображениями внутри них. Третья переменная это itemAmt , которая установлена ​​на длину нашей переменной items . Эта последняя переменная дает нам общее количество слайдов в нашем слайдере изображений.

Затем мы создаем функцию с именем ‘ cycleItems ‘. Эта функция будет использоваться для отображения правильного изображения, при этом остальные будут скрыты. Внутри этой функции мы создаем переменную с именем item . Эта переменная установлена ​​в $('.container div'). eq(currentIndex) . Метод eq предоставляемый jQuery, принимает целое число и нацеливается на первый элемент, возвращаемый $('.container div') который соответствует целому числу. Поэтому, если currentIndex равен 0, $('.container div').eq(currentIndex) на первый контейнер изображения в нашем слайдере изображений. Следующее, что нужно сделать внутри нашей функции cycleItems, это скрыть все наши div-контейнеры изображений и установить item для display: inline-block; ,

Чтобы убедиться, что наши изображения вращаются автоматически, нам нужно предоставить способ непрерывного вызова нашей функции cycleItems по истечении определенного времени. Мы делаем это, создавая другую переменную с именем autoSlide . Эта переменная хранит функцию setInterval, которая занимает задержку 3000 миллисекунд или три секунды. Внутри этой функции мы увеличиваем переменную currentIndex на единицу, так что $('. container div').eq(currentIndex) всегда будет ссылаться на следующий контейнерный div. Затем мы определяем очень важное утверждение «если». Это утверждение говорит, что если наша переменная currentIndex больше, чем общее количество изображений в нашем ползунке, сбросьте переменную обратно в ноль. Если бы у нас не было этого оператора if, мы бы не смогли просмотреть наш список изображений. После оператора if мы вызываем нашу функцию cycleItems.

Далее мы определяем наши предыдущие и следующие действия. Они определяют, что произойдет, когда мы нажмем предыдущую и следующую кнопки. Они работают так же, как функция autoSlide , за исключением того, что они отменяют автоматический autoSlide при нажатии. Чтобы вручную перемещаться по слайдам, нажатие следующей кнопки добавляет единицу в переменную currentIndex , а нажатие предыдущей кнопки вычитает одну из переменной currentIndex .

Демо

бонус

Чтобы увидеть слайдер изображений, созданный с использованием только CSS и HTML, посмотрите это демо Zack Wallace !

прокручиваемых изображений

Эта страница содержит коды копирования/вставки для прокрутки изображений.

Прокручиваемые изображения были получены с помощью тега HTML

. Используя этот тег, вы можете задавать своим изображениям горизонтальную прокрутку (справа налево, слева направо) или вертикальную прокрутку (сверху вниз или снизу вверх).

Обратите внимание, что тег не является официальным тегом HTML (но он распознается большинством современных браузеров). См. Выделения CSS для выделения, соответствующего стандартам.

Справа налево (RTL)

Этот раздел содержит изображение, которое прокручивается горизонтально (справа налево, слева направо или их комбинация). Горизонтальная прокрутка достигается с помощью атрибута direction , который перемещает изображение справа налево или слева направо по мере необходимости.

Вставные изображения

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

<шаговое поведение="слайд" направление="влево"> gif» alt=»Летучая мышь»> Летучая мышь Летучая мышь

Непрерывная прокрутка изображения (RTL)

Чтобы изображение прокручивалось непрерывно, мы просто меняем значение атрибута поведения на прокрутки (т. е. behavior="scroll" ).

Быстрая прокрутка

В этом примере используется scrollamount="30" для увеличения скорости прокрутки.

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

Слева направо (LTR)

Вставное изображение

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

Непрерывная прокрутка изображения (LTR)

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

Быстрая прокрутка

В этом примере используется

scrollamount="30" для увеличения скорости прокрутки.

Изображение прыгает туда-сюда:

Нормальная скорость

Это изображение подпрыгивает со скоростью по умолчанию.

Быстрее отскок

В этом примере используется scrollamount="30" для ускорения прокрутки/подпрыгивания изображения.

Прокрутка изображения вверх:

Это изображение имеет вертикальную прокрутку — она начинается снизу и движется вверх. Как и в некоторых предыдущих примерах, вы можете настроить скорость прокрутки, используя атрибут scrollamount . Вы также можете создать вертикальный слайд, используя поведение="слайд" .

изображений прокрутки вниз:

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

Различные скорости прокрутки:

Этот пример демонстрирует 3 разные скорости прокрутки.

Летящая пчела Рыба плывет справа налево Летучая мышь летит очень быстро

Прыгающие изображения

В следующем примере атрибут scrolldelay используется для замедления прокручиваемого изображения и создания эффекта прыжка по экрану. На самом деле в примере также используется атрибут scrollamount для увеличения размера каждого перехода.

Атрибуты бегущей строки

Тег принимает ряд атрибутов (некоторые из которых включены в приведенные выше примеры). Не стесняйтесь экспериментировать с этими настройками, чтобы увидеть, как они влияют на прокручиваемые изображения. Полный список атрибутов:

908 SETS THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE THE The MAROPE Сколько раз должно повторяться
Ширина Устанавливает ширину марки Scrollamount Как далеко до перехода
HEART
направление Устанавливает направление выделения bgcolor Устанавливает цвет фона выделения
Поведение Будь то, чтобы скользить, отскочить или прокрутить HSPACE Устанавливает количество горизонтального пространства вокруг марки
. jump vspace Устанавливает размер вертикального пространства вокруг области выделения

Падающие изображения

Вы можете получить несколько крутых эффектов при прокрутке изображений. Посмотрите на это изображение падения (сгенерировано с помощью генератора падающих объектов).

...круто!Марки......эффекты...

Маркизы CSS

В приведенных выше примерах используется HTML-тег marquee для создания эффекта прокрутки. CSS 3 — последняя версия каскадных таблиц стилей — позволяет создавать прокручиваемый текст с помощью CSS-анимации. Некоторые примеры см. в разделе «Выделение CSS».

Галерея изображений с горизонтальной и вертикальной прокруткой и CSS Scroll Snap

08.04.2022

Горизонтальная прокрутка на мобильных устройствах и вертикальная прокрутка на рабочем столе

Немецкая версия

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

Привязка прокрутки в действии: пример галереи изображений

В этом процессе одно или несколько изображений или других элементов содержимого упаковываются в «контейнер прокрутки», в котором элементы затем привязываются к определенным позициям после прокрутки. Вы можете найти подробные объяснения концепции CSS Scroll Snap в Mozilla.

Благодаря CSS Scroll Snap можно разместить самое необходимое в центре экрана. Без JavaScript вообще горизонтальная или вертикальная прокрутка всегда будет прокручиваться так далеко, что — как в примере с галереей изображений на моем демонстрационном сайте — всегда перемещает следующее изображение или ряд изображений в центр, начало или конец окружающего контейнера. , а точнее "защелкивание".

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

Пример галереи изображений

Чтобы проиллюстрировать принцип «быстрой прокрутки», я создал галерею изображений и разработал ее с помощью CSS Flexbox. Вот ссылка на демонстрационный сайт с галереей изображений.

А вот код HTML для галереи изображений с CSS Scroll Snap :

  
 Код HTML 
 
<дел>
  <рисунок>
     photos/230/300?random=1" alt="изображение символа" title="изображение символа">
    
Название изображения

  
  
  <рисунок>
    изображение символа
    
Название изображения
Примечания к коду HTML

Дизайн галереи изображений

Галерея изображений с горизонтальной и вертикальной прокруткой

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

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

Горизонтальная прокрутка на мобильных устройствах

Сначала я покажу вам код CSS для горизонтальной мобильной версии:

  
 Код CSS 
  . gallery-scroll {
  дисплей: гибкий;
  гибкая обертка: nowrap;
  маржа: 0;
  заполнение: 0;
  цвет фона: #f0f0f0;
  тип привязки прокрутки: x обязательно;
  поведение прокрутки: гладкое;
  переполнение-x: прокрутка;
}
.галерея-элемент {
  набивка: 0,5 бэр;
  размер шрифта: 1.2rem;
  выравнивание текста: по центру;
  цвет фона: #333;
  цвет: #d9d9d9;
  прокрутка-щелчок-выравнивание: центр;
}
Примечания к коду CSS

.галерея-прокрутка

.галерея-элемент

Вертикальная прокрутка на больших экранах

При вертикальной прокрутке я установил высоту контейнера прокрутки на 450 пикселей, что немного больше, чем высота изображений (300 пикселей), чтобы всегда было видно, что следуют другие изображения.

Вертикальная прокрутка достигается с помощью следующего кода, который я поместил в медиа-запрос:

 Код CSS 
 Экран @media и (минимальная ширина: 800 пикселей) {
 .
No related posts.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *