13. А все ж таки вона обертається!
Коперник зупинив Сонце, перемістив Землю. Ми зрушимо всі 8 планет!
Завантажуйте наш пакет: посилання
Всередині ви знайдете файл index.html, main.js та main.css.
Коли ви відкриєте файл index.html у вашому браузері, ви побачите 9 зображень планет.
Тепер подивімося на цей файл у текстовому редакторі.
Наші планети — це елементи списку:
<ul class="carousel">
<li class="single-slide">…</li>
</ul>
Всередині ви знайдете файл index.html, main.js та main.css.
Коли ви відкриєте файл index.html у вашому браузері, ви побачите 9 зображень планет.
Тепер подивімося на цей файл у текстовому редакторі.
Наші планети - це елементи списку:
Як ви можете здогадатися, наше завдання - створити карусель. Ми почнемо з того, що правильно її розташуємо. Для цього ми скористаємося стилями CSS, які розмістимо у файлі main.css. Щоб прикріпити стилі до нашого html-файлу, нам потрібно додати ще один елемент між тегами <head></head>:
<link rel="stylesheet" type="text/css" href="sciezka/do/pliku.css">
Якщо ви все зробили правильно, то повинні побачити зоряне небо.
Тепер настав час додати наші стилі. У цьому вам допоможе сайтw3schools. І не бійся використовувати Google. Щоб додати стиль, ми звертаємося до класів окремих елементів. Для цього нам потрібно написати у файлі CSS:
.className {
property: value;
}
Наприклад:
.carousel {
background-color: green;
}
Тло всієї каруселі має стати зеленим.
Почнемо з того, що розташуємо планети поруч. Нехай кожен слайд має ширину (width) 800px. Встановімо ширину всієї каруселі приблизно 7300 пікселів.
Також зробимо кожну планету по центру слайда (text-align: center;). Але ми все одно можемо бачити більше однієї планети. Тому задамо ширину (width) сцени (.carousel-stage), і приховаємо те, що не поміститься на ній (overflow: hidden;). Також вирівняємо нашу сцену по центру (.carousel_stage, margin-left: auto; margin-right: auto;).
Тепер про навігацію. Бачите дві стрілки під каруселлю? Спочатку давайте розмістимо їх на потрібній висоті, тобто на половині каруселі. Для початку дамо каруселі position: relative. Саме відносно неї ми будемо розташовувати стрілки. Щоб стрілки були не під каруселлю, а “висіли в повітрі”, надамо навігації (.carousel-nav) position:absolute.
Розмістимо стрілки на півдорозі вгору по каруселі. Додамо до стилів top: 50% (тоді навігація буде на рівні 50% від висоти батьківського стилю, який має position: relative). Але щось не зовсім складається. Стрілки трохи занизькі. Рівно на половину їхньої висоти занадто низько. Тому ми зробимо невелику трансформацію: transform: translateY(-50%).
Наступний крок: розмістити одну стрілку з правого, а іншу — з лівого боку каруселі. Це можна зробити за допомогою float: left; і float: right; відповідно.
Час привести наші планети в рух!
Для початку давайте підключимо файл main.js до нашої сторінки. Ми робимо це аналогічно файлу CSS, за винятком того, що використовуємо тег script і вказуємо шлях до нього в атрибуті src.
<script src="sciezka/do/pliku.js"><script>
Перейдіть на сторінку, а потім в консоль браузера. Якщо все працює, має з’явитися повідомлення.
Давайте подумаємо, як ми хочемо, щоб наша карусель працювала. Уявімо, що це стрічка фільму, і в певні моменти (при натисканні стрілки або через певний проміжок часу) вся стрічка повинна рухатися на ширину одного кадру (тобто на один слайд).
Перейдемо до файлу main.js. Видалимо поточний код. Почнемо з визначення наших змінних:
carousel для каруселі
stage для сцени нашої каруселі
prev для кнопки “назад”
next для кнопки “вперед”
Не забудь про ключові слова, які визначають змінні (тобто ми використовуємо тут let або const).
Тепер ми отримаємо елементи HTML у визначені нами змінні. Для цього ми скористаємося вже відомим методом querySelector(), який відобразить перший елемент на сторінці із заданим атрибутом, наприклад, class.
var carousel = document.querySelector('.carousel');
Отримай таким чином елементи для решти визначених змінних (тобто для нашої сцени та двох кнопок).
Нам залишиться визначити ще одну змінну: slide для окремих елементів каруселі. Тут нам потрібно взяти всі слайди, тому ми скористаємося методом querySelectorAll().
Проробимо це з усіма елементами на сторінці :)
Наступний крок — вказати, на яку ширину ми хочемо, щоб наша “стрічка” рухалася. Як ми вже згадували, це ширина одного слайда. Спробуймо “розтягнути” це значення. Для цього ми скористаємося властивістю clientWidth, яка повертає ширину заданого елемента. Спробуймо:
var slideWidth = slide.clientWidth;
console.log(slideWidth);
Перевіримо, що виводиться в консолі. Ми отримуємо повідомлення, що значення не визначено. Тому перевіримо, що ховається під змінною slide.
З’являється список елементів. JS не може визначити ширину списку елементів. Це тому, що наша змінна slide містить масив з усіма елементами класу slide, які вдалося знайти в документі. Натомість наш код може працювати з одним елементом, наприклад, з першим елементом. Перший елемент у списку має нульовий індекс, тому:
var slideWidth = slide[0].clientWidth;
console.log(slideWidth);
Наступний крок — вказати, який слайд ми щойно відобразили. Спочатку це буде перший слайд, але, як ми знаємо, в JS першим елементом є елемент 0.
var currentIndex = 0;
Але що, якщо ми дійдемо до останнього елемента? Ми повинні повернутися до початку слайда. Отже, знайдімо останній елемент. Спочатку ми вкажемо кількість всіх елементів. Для цього скористаємося властивістю length.
var slidesNumber = slide.length - 1;
Звідки взялося число -1? Slide.length - це кількість слайдів. Тобто 9, але в JavaScript ми починаємо відлік елементів з 0, а не з 1. Останній слайд матиме значення не 9, а 8.
Гаразд! Тепер настав час написати функцію, яка приведе нашу Сонячну систему в рух і пересуне всю карусель на відповідну ширину. Для цього ми будемо використовувати стилі. Спочатку спробуємо використати CSS, щоб перемістити нашу карусель вліво на один слайд, або на 800px. У цьому нам допоможуть властивості position, left і right.
Після того, як все вийшло, повернімось до JS-файлу. Ми будемо маніпулювати значеннями CSS за допомогою функцій JavaScript.
Створимо функцію з назвою goToSlide() Результатом буде зміна значення властивості left нашої каруселі. Цього має бути достатньо, щоб показати відповідний слайд. Невелика підказка — ми будемо використовувати змінну slideWidth і позицію слайда, який хочемо побачити.
Почнемо з початку. Для зміни значення left каруселі ми скористаємося методом style.left. З його допомогою ми можемо змінювати позицію заданого елемента відносно його лівого краю.
function goToSlide() {
carousel.style.left = ...;
}
Розгляньмо, яке значення length повинно бути, щоб показати другий слайд. А яке значення для третього, а яке для четвертого? Чи бачите ви якесь загальне правило?
Так, ми множимо slideWidth на позицію конкретного слайда. Спробуймо!
Припустимо, що змінна index — це позиція нашого слайда. Визначимо її як 3 (позиція 4 слайду).
function goToSlide() {
carousel.style.left = 3 * (-slideWidth);
}
Викличемо цю функцію в консолі.
Працює!
Тільки є проблема — у нас є декілька слайдів, кожен з яких має різний index. Писати окрему функцію для кожного слайда було б неефективно. Тому використаймо параметри функції! Тоді для різних значень ми зможемо використовувати одну і ту ж функцію.
function goToSlide(index) {
carousel.style.left = index * (-slideWidth);
}
Викличемо цю функцію в консолі, набравши, наприклад, goToSlide(3);, goToSlide(1);, goToSlide(4);.
Працює! Тільки тепер currentIndex також має змінитися. Він має дорівнювати числу, яке ми ввели як аргумент. Додаймо цю зміну до нашої функції:
function goToSlide(index) {
carousel.style.left = index * (-slideWidth);
currentIndex = index;
}
Перейдемо до навігації :)
При натисканні на кнопку carousel-next ми повинні переходити на слайд з індексом на 1 більше. При натисканні на кнопку carousel-prev ми повинні переходити на слайд з індексом на 1 менше поточного індексу.
Тому створимо дві функції. Перша функція:
function slideToNext() {
}
Передбачається, що при кожному її виклику слайди будуть пересуватися вперед на 1. Тобто, ми використовуємо функцію goToSlide(). Що буде нашим аргументом? Як ми вже згадували раніше, кожен виклик нашої функції повинен перемістити нас на слайд з індексом на 1 більше, ніж індекс поточного слайда. Ми зберігаємо індекс поточного слайда у змінній currentIndex. Тобто, наш аргумент — це currentIndex + 1.
function slideToNext() {
goToSlide(currentIndex + 1);
}
Проведемо аналогію з slideToPrev.
Наступним кроком буде виклик обох функцій при натисканні на кнопки. Кліки — це події, які відбуваються на сторінці. Вони можуть бути викликані користувачем (наприклад, клацанням миші) або елементом на сторінці. Відправлення форми або завантаження зображення також є подією. Прикладами подій на сторінці є:
| Подія | Опис |
|---|---|
| blur | об’єкт більше не активний |
| change | змінився вміст об’єкту (наприклад, поле форми) |
| click | клік на об’єкті |
| dblclick | подвійний клік на об’єкті |
| focus | вибір об’єкту на сторінці |
| keydown | натискання клавіші на клавіатурі |
| input | утримування клавіші на клавіатурі |
| keyUp | відпускання клавіші на клавіатурі |
| load | коли об’єкт завантажується (це може бути і вся сторінка) |
| mouseover | коли курсор знаходиться на об’єкті |
| mouseout | коли курсор покинув об’єкт |
| contextmenu | при натисканні правої кнопки миші та виклику контекстного меню |
| wheel | при обертанні коліщатка миші |
| resize | коли змінюється розмір вікна браузера |
| select | коли виділено вміст об’єкта |
| submit | коли вміст форми був відправлений |
| unload | користувач залишив сторінку |
| animationstart | запускається css анімація |
| animationend | css анімація закінчила програвання |
Ми будемо використовувати метод addEventListener для відстеження того, чи відбулася подія.
element.addEventListener('подія як строка', що_має_відбутись, опціонально_true_або_false);
Ми створимо окрему функцію для всіх подій на сторінці. Назвемо її bindEvents:
function bindEvents() {
}
Почнемо з кнопки “Назад”. Вона знаходиться під змінною prev. Викличемо метод addEventListener для цієї змінної:
function bindEvents() {
prev.addEventListener();
}
А тепер аргументи. Ми хочемо відстежити event кліка, тобто click. Для цього потрібно викликати функцію slideToPrev. Помістимо її в потрібне місце:
function bindEvents() {
prev.addEventListener('click', slideToPrev);
}
Додамо аналогічну подію до функції bindEvents, тільки для кнопки next.
Викличемо функцію bindEvents і перевіримо, чи працюють кнопки :)
Чудово! Однак, подивіться, що станеться, якщо ми продовжимо натискати next або back — планети зникають. Наша карусель продовжує рухатися на 800px. Треба її обмежити. Після останньої планети нехай вона повертається до першої планети, а коли ми хочемо повернутися з першої планети, нехай вона показує нам останню планету.
Давайте ще раз подивимось на нашу функцію:
function goToSlide(index) {
carousel.style.left = index * (-slideWidth);
currentIndex = index;
}
Все, що відбувається, залежить від індексу. Тож давайте зробимо так, щоб індекс, більший за індекс останньої планети, дорівнював 0, а індекс, менший за індекс першої планети, дорівнював індексу першої планети.
Для цього ми будемо використовувати умовні оператори (if… else). Тобто, якщо індекс менше 0, ми змінюємо його на значення slidesNumber.
function goToSlide(index) {
if (index < 0) {
index = slidesNumber;
}
carousel.style.left = index * (-slideWidth);
currentIndex = index;
}
А якщо він більший за slidesNumber — змінюємо його на 0.
function goToSlide(index) {
if (index < 0) {
index = slidesNumber;
} else if (index > slidesNumber) {
index = 0;
}
carousel.style.left = index * (-slideWidth);
currentIndex = index;
}
Перевіримо її зараз.
Додамо каруселі ще трохи життя — нехай вона крутиться сама по собі. Для цього скористаємося вже знайомим нам методом setInterval.
Створимо функцію autorotate.
function autorotate() {
}
Нехай функція slideToNext виконується кожні 4 секунди (4000 мс):
function autorotate() {
setInterval(slideToNext, 4000);
}
І викликаємо функцію autorotate.
І тепер все обертається! :)