Слайдер с меняющимися фото на CSS

Слайдер выполнен без применения скриптов с использованием СSS-свойства animation

Пример:

Национальный Парк Йеллоустоун

Йеллоустоун — национальный парк и заповедник на северо-западе США. Он расположен на территории сразу трех штатов: Вайоминг (самая большая часть), Айдахо и Монтана.

Мальдивские Острова

Мальдивские острова – это огромный архипелаг островов вулканического происхождения и окружающих их коралловых рифов и лагун в Лаккадивском море.

Горы Шотландии

Шотландия — самая горная страна из составляющих Великобританию. Наиболее высокие горы находятся в западной части Грампианских горах.

Озеро Ирен

HTML:

CSS:

Немного о коде

На показ каждого слайдера выделяется 10 секунд, а всего их 4. Поэтому общая продолжительность анимации составляет 40 секунд. Это указывается в строках animation: slideanim 40s infinite и animation: zoom 40s infinite

Для каждого слайда отдельно устанавливается задержка, это классы .slideshow-item:nth-child(1), .slideshow-item:nth-child(1) img и т.д.

Значения в анимации slideanim устанавливаются так:

  • 12.5% {opacity: 1} - 100 / 4 (кол-во слайдов) / 2, при котором переходим с полной прозрачности в видимую область
  • 25% {opacity: 1} - 100 / 4 (кол-во слайдов), при котором показываем непрозрачный слайд
  • 37.5% {opacity: 0} - складываем первые два значения для перехода опять в прозрачность

Значения в анимации zoom устанавливаются так:

  • 50% {transform: scale(1.3)} - 100 / 4 (кол-во слайдов) x 2, при котором увеличиваем фотографию

Например, для 7-ми слайдов эти анимации будут выглядеть так:

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Владимир:

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

    Ответить
    • Alexander:

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

      Ответить
      • Владимир:

        Нет ли у вас готового решения на css слайдер с элементами ручного перехода?

        Ответить
        • Alexander:

          На CSS нет, а со скриптами, посмотрите в разделе, может что то понравится

          Ответить
  • Anton:

    Можно как то без этого текста? Хотелось бы сделать слайдер только без текста, спасибо!

    Ответить
    • Alexander:

      Так просто удалите или тексты или весь их контейнер slideshow-item-text

      Ответить
  • Константин:

    Вагон респекта автору. Забрал к себе на сайт, давно искал простенький слайдер для анонсов мероприятий. Ваш подошёл прекрасно (с небольшой подгонкой). Всего вам, хорошего!

    Ответить
  • Игорь:

    Здравствуйте, на десктопе все отлично, на телефоне все картинки в столбец выстраивает без динамики(

    Ответить
    • Alexander:

      Не должно бы так быть.
      Первое что приходит на ум — закешировались там старые стили.

      Ответить
      • Игорь:

        Спасибо за оперативную обратку, глюк встроенного браузера андроида, все работает! Спасибо

        Ответить
  • Melt:

    Спасибо огромное! Среди тонны ненужных похожих вариантов в интернете, ваш — просто идеален: все просто и понятно, нет нечего лишнего, не задействован js

    Ответить
  • Veaceslav:

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

    Ответить
    • Alexander:

      Этот слайдер сделан на прозрачности.
      Чтобы добавить ссылку, нужно будет ставить в анимации z-index-ы, чтобы видимый был наверху по Z и мог кликаться.

      Ответить
      • Юрий:

        Вопрос такой же, про ссылки внутри слайдера, не могли бы Вы привести пример?
        Спасибо

        Ответить
        • Alexander:

          Я поправил CSS код, теперь можно делать ссылки в описании.

          Ответить