Як створити слайдер зображень за допомогою jQuery

Цей підручник допоможе вам побудувати повзунок зображень за допомогою бібліотеки jQuery.

GIF показує повзунок в дії

Цей підручник матиме чотири частини:

  • HTML
  • СКСС
  • JS
  • Список літератури

HTML

Ми використаємо Bootstrap для цього підручника, щоб зберегти гарний вигляд, не витрачаючи багато часу.

Наша структура буде такою:

    Всередині нашого ulз класом slidesми матимемо таке:

  • Всередині нашого .buttonsкласу ви повинні мати таке:

    Ось приклад того, як ви htmlповинні виглядати:

    Примітка. Вам слід замінити srcатрибут зображення власним вмістом.

    СКСС

    Ми використовуємо Sass і синтаксис SCSS, щоб ми могли вкладати та використовувати змінні

    : heart_decoration:

    Ми можемо використовувати наступний SCSS для визначення нашого стилю:

    // 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);

    Ми використовуємо pauseзмінну, щоб побачити, скільки мілісекунд потрібно зачекати перед повторним викликом функції. Детальніше про рідний setIntervalметод читайте тут: //developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. Усередині нашої функції ми будемо використовувати jQuery для переходу між слайдами зі швидкістю змінної animationSpeed:

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

    Ми націлюємося на перший слайд за допомогою $('.slides > li:first'). - .fadeOut(animationSpeed)зникає перший слайд, а потім, використовуючи .next(), ми переходимо до наступного слайда. - Після того, як ми перейшли на наступний слайд, ми будемо поступово зникати в: .fadeIn(animationSpeed). - Ця послідовність триватиме до останнього слайда ( .end()), тоді ми зупиняємо анімацію. Тепер ми будемо викликати startSliderфункцію для запуску анімації:

    startSlider ();

    Відтворення та пауза Ця функція необов’язкова, але досить проста у реалізації. Ми будемо приховувати кнопку відтворення, тому ми не бачимо як кнопки відтворення, так і паузи:

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

    Тепер ми створимо нашу кнопку паузи (автоматично відображається при завантаженні сторінки):

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

    Ми будемо викликати нашу функцію кожного разу, коли натискаємо кнопку паузи за допомогою jQuery. - Ми видалимо інтервал, використовуючи clearIntervalметод і використовуючи нашу intervalзмінну як параметр, вказуючи, який інтервал зупинити. - Оскільки наш повзунок призупинено, ми приховаємо кнопку паузи за допомогою $(this).hide();. Примітка: ми використовуємо this, що буде означати те, що називає наш батько, тобто .pause. - Ми тоді показати нашу кнопку відтворення , так що користувач може відновити анімацію: $('.play').show();. Наступний код встановлює нашу кнопку відтворення (автоматично приховується при завантаженні сторінки):

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

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

    • Ми розпочнемо або перезапустимо інтервал за допомогою startSliderфункції.
    • Оскільки наш слайдер зараз відтворюється, ми будемо приховувати кнопку відтворення за допомогою $(this).hide();. Примітка: ми використовуємо this, що буде означати те, що називає наш батько, тобто .play.
    • Потім ми покажемо нашу кнопку паузи , так що користувач може зупинити анімацію за бажанням: $('.pause').show();.

    Список літератури

    • Ознайомтесь із вихідним кодом та прикладом на CodePen для цього підручника.