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

Автор оригинала: FreeCodeCamp Community Member.

Этот учебник проведет вас через создание слайдера изображений, используя jquery библиотека.

Этот учебник будет иметь четыре части:

HTML

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

Наша структура будет следующим образом:

Внутри нашего UL С классом Слайды У нас будет следующее:

Внутри нашего .buttons Класс, который вы должны иметь следующее:

Вот пример того, что ваш HTML должен выглядеть как:

Примечание. Вы должны заменить изображение SRC атрибут с вашим собственным контентом.

SCSS.

Мы используем Sass и синтаксис SCSS, чтобы мы могли гнездиться и использовать переменные

Мы можем использовать следующие SCS, чтобы определить наш стиль:

// Variables
$width: 720px;

.slider {
  width: $width;
  height: 400px;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;

  .slides {
    display: block;
    width: 6000px;
    height: 400px;
    margin: 0;
    padding: 0;
  }

  .slide {
    float: left;
    list-style-type: none;
    width: $width;
    height: 400px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.buttons {
  margin: 0;
  width: $width;
  position: relative;
  top: -40px;
  margin: 0 auto;

  .play {
    display: none;
  }

  .btn {
    display: flex;
    margin: 0 auto;
    text-align: center;
  }
}

Js.

Переменные

В следующем фрагменте кода мы определяем переменные, используемые позже в нашем коде.

var animationSpeed = 1000; // How quickly the next slide animates.
var pause = 3000; // The pause between each slide.

Мы будем использовать пустую переменную, где мы будем называть Setinterval Метод:

var interval;

Анимация Мы будем обернуть нашу слайдерную анимацию внутри функции:

function startSlider() {}

Мы используем SetInterval () Сотрудный метод JavaScript для автоматизации содержимого функции на триггеру на основе времени.

interval = setInterval(function() {}, pause);

Мы используем пауза Переменная, чтобы увидеть, сколько миллисекунд ждать, прежде чем снова вызывать функцию. Читать далее на родном Setinterval Метод здесь: https://developer.mozilla.org/en-us/docs/web/api/windowtimers/setintererval Отказ Внутри нашей функции мы будем использовать jQuery для исчезновения между слайдами со скоростью переменной анимации.

$('.slides > li:first')
  .fadeOut(animationSpeed)
  .next()
  .fadeIn(animationSpeed)
  .end()
  .appendTo('.slides');

Мы нацеливаем на первый слайд, используя $ ('. Slides> Li: First') Отказ – .fadeout (AnimationsPeed) исчезнет сначала, а затем использовать .Next () мы переходим к следующему слайду. – Как только мы переехали на следующий слайд, мы будем исчезнуть это: .fadein (Animationspeed) Отказ – Эта последовательность продолжится до последнего слайда ( .end () ), то мы остановим анимацию. Теперь мы позвоним Startslider Функция для начала анимации:

Startslider ();

Воспроизведение и пауза Эта функция не является обязательной, но довольно простой в реализации. Мы будем скрывать кнопку воспроизведения, поэтому мы не видим как кнопки Play, так и Pause:

$('.play').hide(); // Hiding the play button.

Теперь мы создадим нашу кнопку паузы (автоматически поведен на нагрузке страницы):

$('.pause').click(function() {
	clearInterval(interval);
	$(this).hide();
	$('.play').show();
});

Мы будем называть нашу функцию каждый раз, когда кнопка Паузы нажала с помощью jQuery. – Мы удалим интервал, используя ClearInterval Способ и использование наших Интервал Переменная в качестве параметра, указывающая, какой интервал остановки. – Потому что наш слайдер приостановлен, мы скроем кнопку паузы, используя $ (это) .hide (); Отказ Примечание: мы используем это , который будет ссылаться на то, что наш родитель звонит, то есть .Последствие Отказ – Затем мы покажем нашу кнопку воспроизведения, чтобы пользователь мог возобновить анимацию: $ ('. PLAY'). SHOW (); Отказ Следующий код устанавливает нашу кнопку воспроизведения (автоматически скрыта на странице Load):

$ (‘. PLAY’). Нажмите (функция () {Startslider (); $ (это) .hide (); $ (‘. Pause’). Показать ();});

Мы будем называть нашу функцию каждый раз, когда кнопка воспроизведения нажала с помощью jQuery.

Мы начнем или перезагрузим интервал, используя Startslider функция.
Поскольку наш слайдер в настоящее время играет, мы скроем кнопку воспроизведения, используя $ (это) .hide (); Отказ Примечание: мы используем это , который будет ссылаться на то, что наш родитель звонит, то есть .play Отказ
Затем мы покажем нашу кнопку паузы, чтобы пользователь мог остановить анимацию по желанию: $ ('. Пауза'). Показать (); Отказ

HTML

SCSS.

Js.

Переменные

Анимация Мы будем обернуть нашу слайдерную анимацию внутри функции:

Рекомендации

Читайте ещё по теме: