По-перше, що ми назвемо слайдером ?
Ну, хочеться автору сайта, щоб в тілі статті на сайті була певна кількість картинок, і щоб картинки були разом, і щоб читач міг ці картинки перегортати. Ну, якось так, як на малюнку із трьома пташками, а стрілочками можна перегортати зображення:
Читач собі натискає на ті кнопки Вліво і Вправо, і картинки міняються.
Беремо якийсь простецький шаблон, вставляємо в тіло своєї статті на сайті, створеному з допомогою WordPress, і відчуваємо, що тут щось не так.
Незважаючи на багато тупих незручностей WordPress’a, дещо корисне в ньому є:
– Стискаємо горизонтальні розміри браузера на екрані комп’ютера, і сторінка сайту культурно, без обрізання країв стискається.
– Дивимось той самий сайт на телефоні, горизонтальний розмір зображення вже непроходимо малий, але сторінка сайту все одно намагається “стиснутись в формат”, щоб і на телефоні сторінка сайту виглядала нормально.
І лише скопійований нами якийсь слайдер цю адаптацію не підтримує, він знає якийсь свій розмір, і плює на бажання WordPress’a робити якусь адаптацію розмірів.
Що робити ? Застосувати якийсь із “віджетів” для слайдера від WordPress ? Та пробував я, і цих віджетів аж кілька, і воно навіть працює, але цей носороговий, не в міру універсальний слайдер все одно не такий, як хочеться, а сервер хостинга, на якому зберігається сайт, дуже нагружається цим віджетом.
Нічого, обійдемось своїми силами, без віджетів.
Завдання наше дуже просте: слайдер в тілі статті повинен поводитись так, так як хоче WordPress: із автоматичною підгонкою горизонтальних, а заодно і вертикальних розмірів зображень в статті. То де там наш зразок для слайдера ?
Ось приблизно так робимо опис слайдера в тілі статті:
Ось попередня частина статті. Зараз буде текст для слайдера.
Ці картинки можна перелистувати стрілочками вліво і вправо.
<link rel=”stylesheet” href=”адреса, куди ми покладемо файл styles.css”>
<div class=”container”>
<div class=”slider”>
<div class=”slider-block”><div class=”slider-block”><img src=”адреса першої картинки.jpg” alt=”” width=”slider-block.widht” height=”slider-block.height” />
<img src=”адреса другої картинки.jpg” alt=”” width=”slider-block.widht” height=”slider-block.height” />
<img src=”адреси ще кількох картинок.jpg” alt=”” width=”slider-block.widht” height=”slider-block.height” />
<img src=”адреса останньої картинки.jpg” alt=”” width=”slider-block.widht” height=”slider-block.height” />
</div>
</div>
<div class=”button-block”><img class=”arrow-next” src=”адреса зображення стрілочки вліво, наприклад, arronex.png” alt=”” /><img class=”arrow-prev” src=”адреса зображення стрілочки вправо, наприклад, arropre.png” alt=”” /></div>
</div>
<script src=”адреса, де ми покладемо файл script.js”></script>
Без пояснення, не сумнівайтесь, не обійдусь.
Спочатку написано link і там вказується, де буде лежати файл CSS з описом елементів, які ми додаємо в статтю.
Потім створюємо контейнер, ми так і назвали: container.
А всередині нього – ще один контейтер, ми назвали його slider.
А всередині нього ще контейнер slider-block і в нього (без пробілів і переходів на новий рядок) вкидуємо перше зображення (картинку) для слайдера.
Далі вкидуємо всі інші зображення для слайдера.
Далі – закрили контейнер slider-block командою </div>
Далі – такою ж командою </div> закрили контейнер slider.
Ми ще всередині контейнера container. Ще треба додати зображення кнопок Вліво і Вправо.
Робимо невеличкий контейнер button-block і в нього вкидуємо файли-зображення наших кнопок.
Командою </div> закрили контейнер button-block.
Такою ж командою </div> закрили контейнер container.
Можна продовжувати статтю за нашим слайдером далі. Більше нічого в тіло статті для забезпечення роботи слайдера додавати не доведеться. Файли картинок, які ми накидали в слайдер, не обов’язково повинні бути в форматі .jpg, підійде якийсь графічний формат, який розуміють програми-браузери.
Але ми ще не розібрали текст в файлах styles.css (таблиця стилів) і script.js (сценарій, тобто скрипт, без якого не обійдеться робота слайдера).
То давайте розберемо. Ось текст файла styles.css.
* {
margin: 0;
}
.container {
max-width: auto; /* щоб ширина сбільшувалась, скільки треба */
width: 70%; /* дуже корисно. Чи ви хочете ширину картинки на всю можливу зону, чи вам треба менше. */
margin: auto; /* щоб центрувалось */
}
.button-block { /* для кнопок вправо-вліво */
margin: auto;
width: 130px;
}
.arrow-prev { /* для кнопок вправо-вліво */
width: 50px;
cursor: pointer;
}
.arrow-prev:hover { /* якщо натискувати */
background: rgb(183, 213, 232);
border-radius: 50%;
}
.arrow-next {
width: 50px;
cursor: pointer;
}
.arrow-next:hover { /* якщо натискувати */
background: rgb(183, 213, 232);
border-radius: 50%;
}
.slider {
border: 5px solid rgb(167, 244, 24); /* такий буде колір рамки */
width: 100%; /* тут завжди 100% */
height: 100%; /* тут завжди 100% */
margin: auto;
overflow: hidden;
}
.slider-block {
width: 100%; /* тут завжди 100% */
height: 100%; /* тут завжди 100% */
display: flex;
position: relative;
margin: auto;
/* щоб було плавна заміна картинки – додати: transition: all ease 1s; Не обов’язково ціле число секунд, як тут 1s, можна і менше (наприклад, 0.5s), тоді зміна відбувається за пів-секунди */
}
В тексті є немало коментарів, з цим файлом зрозуміло.
А ось так виглядає файл сценарію (скрипта):
let kilk = 7;/* кількість ваших картинок, чи фотографій */
let left = 0;
let rahui = 0;
let slideBlock = document.querySelector(‘.slider-block’);
slideBlock.style.left=1;/* незначна дрібничка. Інакше зміна картинки перший раз відбувається не з заданою швидкістю */
slideBlock.style.left=0;
let krok = slideBlock.getBoundingClientRect().width;
/* безпосередня дія при натисненні на кнопку Вліво*/;
document.querySelector(“.arrow-next”).addEventListener(‘click’, function(){
krok = slideBlock.getBoundingClientRect().width; rahui = rahui + 1;
left = krok * rahui;
if (rahui >= kilk) {left = 0; rahui = 0;}
slideBlock.style.left = -left + ‘px’;
})
/* безпосередня дія при натисненні на кнопку Вправо*/;
document.querySelector(“.arrow-prev”).addEventListener(‘click’, function(){
krok = slideBlock.getBoundingClientRect().width;
rahui = rahui – 1;
if (rahui < 0) {rahui=kilk-1;}
left = krok * rahui;
slideBlock.style.left = -left + ‘px’;
})
Як все це добро працює ? Після того, як ви накачали фотографіями (картинками) контейнер slider-block, він в ширину став немаленьким, куди більшим, ніж сторінка вашого сайту. Але видимою є лише частина цього контейнера, по ширині саме така, як ваші картинки. Параметр left вказує, на скільки змістити зображення всередині цього контейнера, щоб видимою стала лише потрібна вам картинка.
Ви ще не помітили обмеження ? А воно є.
Всі ваші картинки доведеться зробити одною шириною і висотою. Пропорції – які хочете, але всім картинкам слайдера – однаково. Це так, тому що наш слайдер анекдотично простий. Ну, і справжній розмір картинок має бути хоч трошки більшим, ніж вони будуть зображуватись в слайдері.
В тексті скрипта ви бачите запит ширини об’єкта getBoundingClientRect().width хоча ширину об’єкта можна отримати простішим запитом clientWidth. Можна, звісно, але застосований запит дає точніше значення ширини, не приведене до цілих чисел. Отримана ширина (в пікселях) може виявитись дробним числом, а не цілим.
Для неуважних продублюю: якщо хочете плавну заміну одної картинки на іншу, то не забудьте додати в CSS-властивості надпис transition: all ease 1s; (а якщо захочете дуже повільно, то замість 1s напишіть, наприклад, 5s) хоча особисто мені подобається дуже швидка заміна картинки.
Але хтось при цьому каже: все це так, але звідки завантажити зразок ? Ми хочемо зразок.
Добре, завантажуйте зразок.
Власне, це все.