Создаем адаптивный слайдер с помощью jQuery

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

В настоящее время широко распространены устройства с различным разрешением экрана, поэтому наш слайдер будет адаптивным. Рассмотрим, как можно создать такой слайдер с простым дизайном, применением только одной библиотеки jQuery и минимальным количеством кода. Подберем несколько изображений с одинаковыми размерами. В нашем случае это 800х450 пикселей. В проект подключим скрипт с библиотекой jQuery. Наш слайдер не будет иметь элементов управления, а значит отлично впишется в минималистичный дизайн.

Для начала создадим HTML разметку:

<div id="slider">
  <img src="01.jpg" alt="star-wars">
  <img src="02.jpg" alt="star-wars">
  <img src="03.jpg" alt="star-wars">
  <img src="04.jpg" alt="star-wars">
  <img src="05.jpg" alt="star-wars">
  <img src="06.jpg" alt="star-wars">
</div>

Далее с помощью CSS необходимо определить позиционирование слайдера и его адаптивность. Для основного тега с id=slider установим значение position=relative. Это нужно для того, чтобы все изображения позиционировались относительно именно этого элемента. Сам слайдер выставим по центру страницы. А для самих изображений мы установим абсолютное позиционирование и добавим свойства left и top что при необходимости даст возможность сдвигать изображение в ту или иную сторону от первоначального расположения.

Кроме этого мы добавим небольшую рамку для слайдера, применив значение background-color. Рамка будет автоматически изменяться вместе с размером слайдера.

#slider {
  position: relative;
  width: 90%;
  max-width: 640px;
  margin: 0 auto;
}
#slider img {
  position: absolute;
  background-color: #f3f4ef;
  border: 1px solid #dedede;
  padding: 6px;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
}

Теперь напишем небольшой javascript код для нашего слайдера с базовыми эффектами переходов. В коде применим setInterval и зададим время 5 секунд для автоматического перелистывания изображений. Обратим внимание на то что смена изображений будет цикличной:

$(document).ready(function(){
  $('#slider img:gt(0)').hide();
  setInterval(function(){
    $('#slider :first-child')
      .fadeTo(500, 0)
      .next('img')
      .fadeTo(500, 1)
      .end()
      .appendTo('#slider');
  }, 5000);
});

На этом все готово!

Демо