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

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

Шаг 1. HTML

У нас будет ID за которым закреплены будут элементарные стили, мы подключаем изображения и подписи к ним:

Код
<section id="fader">
  <img src="01.jpg" alt="Image One">
  <img src="02.jpg" alt="Image Two">
  <img src="03.jpg" alt="Image Three">
  <img src="04.jpg" alt="Image Four">
  <img src="05.jpg" alt="Image Five">
  <img src="06.jpg" alt="Image Six">
</section>

С разметкой никаких проблем не должно быть, переходим к следующему шагу.

Шаг 2. CSS

Нам необходимо определить позиционирование слайдера и его адаптивность, для самой коробки слайдера мы установим значение position: relative; Это значение означает положение элемента, которое устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

Код
#fader {
  position: relative;
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  top: 20px;
}

#fader img {
  position: absolute;
  background-color: #f3f4ef; border: 1px solid #dedede; padding: 5px;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
}

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

Шаг 3. jQuery

Нам необходимо иметь автоматический слайдер с базовыми эффектами переходов. Кроме этого мы зададим интервал и скорость автоматического перехода, следует заметить, что он будет цикличным:

Код
jQuery('#fader img:gt(0)').hide();

setInterval(function(){
  jQuery('#fader :first-child')
  .fadeTo(500, 0)
  .next('img')
  .fadeTo(500, 1)
  .end()
  .appendTo('#fader');
}, 4000);

Вот и все. Готово!

  • FalleN

  • 5464

  • 1

  • 272

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!