Как создать слайдер изображений или слайд-шоу

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

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

Создание слайдеров изображений используя только CSS3

Наверно вы уже видели слайдеры, созданные с помощью JavaScript, которые очень тяжело загружаются. Они замедляют работу веб-страницы, а также могут не работать, если пользователь отключил интерпретацию JavaScript в браузере. Одно из решений этой проблеме - это отказ от их использования, но как же можно создать слайдеры без использования JavaScript? Здесь вы найдете ответ.

Следуйте этим шагам:

  • Выберите width и height для слайдов.
  • Разместите все ваши слайды рядом друг с другом в одном изображении.
  • Установите изображение как background для <div>. Используйте свойство background-position для установления начального положения (0px). Определите, каким должно быть положение для каждого слайда. Должны быть использованы отрицательные числа.
  • Установите продолжительность для всего слайд-шоу. Для этого используйте свойство animation-duration.
  • Для @keyframes вам придется сделать некоторые вычисления. Используйте (pics * 2) / 100 как умножитель для каждого слайда. "100%" - это последний ключевой кадр (keyframe). Каждое изображение требует несколько ключевых кадров, чтобы приостановить ("pause") слайд-шоу на изображении.

Давайте посмотрим как будет выглядеть код:

Пример



  
    Слайдер изображений
    
  
  
    

    

      
Слайд-шоу без использования Javascript. Он не имеет страниц, кнопок и т. д.

Смотрите пример, где фоновые изображения действуют как слайдеры:

Пример



  
    Слайдер изображений

Создайте слайды со ссылками для перехода

Слайдер обычно имеет UI для перехода на определенный слайд.

Создайте ссылки для перехода, используя тег привязки <a>. Добавьте стиль и кнопки.

Для плавности перехода слайда на компьютере и мобильном устройстве добавьте свойство scroll-behavior со значением "smooth".

Потом используйте псевдокласс :target для добавления чего-нибудь необычного при активном ("active") слайде. Нажатие на одну из навигационных кнопок слайда меняет URL на # hash, и именно тогда :target будет иметь эффект.

Пример



  
    Слайдер изображений
    
  
  
    

      1
      2
      3
      4
      5
      

        
1

        
2

        
3

        
4

        
5

Создание слайд-шоу с помощью CSS и JavaScript

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

После того, как HTML структура для слайдера изображений готова, можно будет использовать CSS стили для интерфейса. Добавьте также стили к изображениям, фонам и т. д. Кроме этого, вам понадобится сделать изображения адаптивными и совместимыми с браузерами, используя CSS свойства.

Сейчас уже можно добавить часть с JavaScript:

Пример



  
    Изображения из слайд-шоу
    
  
  
    

      

        
1 / 3

        
        
Лондон, Англия

      

      

        
2 / 3

        
        
Заход солнца в Румынии

      

      

        
3 / 3

        
        
Нью-Йорк, США

Для создания автоматического слайд-шоу используйте следующий код:

Пример



  
    Изображения из слайд-шоу
    
  
  
    

      

        
1 / 3

        
        
Лондон, Англия

      

      

        
2 / 3

        
        
Заход солнца в Румынии

      

      

        
3 / 3

        
        
Нью-Йорк, США