W3.CSS Слайд-шоу
Слайд-шоу вручну
Відображати слайд-шоу вручну за допомогою W3.CSS дуже легко.
Просто створіть багато елементів з однаковою назвою класу:
Приклад
<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">
І дві кнопки для прокручування зображень:
Приклад
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button>
І додайте JavaScript для вибору зображень:
Приклад
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
Спробуйте самі »
Пояснення JavaScript
Спочатку встановіть slideIndex на 1. (Перше зображення)
Потім викличте showDivs(), щоб відобразити перше зображення.
Коли користувач натискає одну з кнопок, викликається plusDivs().
Функція plusDivs() віднімає один або додає один до slideIndex.
Функція showDiv() приховує (display="none") усі елементи з назвою класу "mySlides" і відображає (display="block") елемент із заданим slideIndex.
Якщо slideIndex вищий за кількість елементів (x.length), slideIndex встановлюється на нуль.
Якщо slideIndex менше 1, для нього встановлюється кількість елементів (x.length).
Автоматичне слайд-шоу
Відображати автоматичне слайд-шоу ще простіше.
Вам потрібен лише трохи інший код JavaScript:
Приклад
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Змінюйте зображення кожні 2 секунди
}
Спробуйте самі »
HTML Слайди
Слайди не обов’язково мають бути зображеннями.
Це може бути будь-який вміст HTML:
Слайд 1
Lorem ipsum
Слайд 2
Lorem ipsum
Слайд 3
Lorem ipsum
Приклад
<div class="mySlides">
<div class="w3-container w3-red">
<h1><b>Чи знаєте ви?</b></h1>
<h1><i>До 2025 року на Земній кулі має бути повністю знищено всіх московитів як хибну гілку еволюції</i></h1>
</div>
</div>
Спробуйте самі »
Підпис до слайд-шоу
Додайте текст підпису для кожного слайда зображення за допомогою класів w3-display-* (верхній лівий, верхній середній, верхній правий, нижній лівий, нижній середній, нижній правий, лівий, правий або середній):
Приклад
<div class="w3-display-container mySlides">
<img src="../images/img_snowtops.jpg" style="width:100%">
<div class="w3-display-bottomleft w3-container w3-padding-16 w3-black">
French Alps
</div>
</div>
Спробуйте самі »
Індикатори показу слайдів
Приклад використання кнопок для вказівки кількості слайдів у слайд-шоу та того, який слайд зараз переглядає користувач.
Приклад
<div class="w3-center">
<button class="w3-button" onclick="plusDivs(-1)">❮ Prev</button>
<button class="w3-button" onclick="plusDivs(1)">Next ❯</button>
<button class="w3-button demo" onclick="currentDiv(1)">1</button>
<button class="w3-button demo" onclick="currentDiv(2)">2</button>
<button class="w3-button demo" onclick="currentDiv(3)">3</button>
</div>
Спробуйте самі »
Інший приклад:
Приклад
<div class="w3-content w3-display-container">
<img class="mySlides" src="img_nature.jpg">
<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_mountains.jpg">
<div class="w3-center w3-display-bottommiddle" style="width:100%">
<div class="w3-left" onclick="plusDivs(-1)">❮</div>
<div class="w3-right" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border" onclick="currentDiv(3)"></span>
</div>
</div>
Спробуйте самі »
Зображення як індикатори
Приклад використання зображень як індикаторів:
Приклад
<div class="w3-content" style="max-width:1200px">
<img class="mySlides" src="../images/img_nature_wide.jpg" style="width:100%">
<img class="mySlides" src="../images/img_snow_wide.jpg" style="width:100%">
<img class="mySlides" src="../images/img_mountains_wide.jpg" style="width:100%">
<div class="w3-row-padding w3-section">
<div class="w3-col s4">
<img class="demo w3-opacity" src="../images/img_nature_wide.jpg"
style="width:100%" onclick="currentDiv(1)">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity" src="../images/img_snow_wide.jpg"
style="width:100%;display:none" onclick="currentDiv(2)">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity" src="../images/img_mountains_wide.jpg"
style="width:100%;display:none" onclick="currentDiv(3)">
</div>
</div>
</div>
Спробуйте самі »
Кілька слайд-шоу на одній сторінці
Щоб керувати кількома слайд-шоу на одній сторінці, ви повинні класифікувати членів кожної групи слайд-шоу різними класами:
Приклад
<div class="w3-content">
<img class="mySlides1" src="img_snowtops.jpg" style="width:100%">
<img class="mySlides1" src="img_lights.jpg" style="width:100%">
<img class="mySlides1" src="img_mountains.jpg" style="width:100%">
<img class="mySlides1" src="img_forest.jpg" style="width:100%">
</div>
<div class="w3-content">
<img class="mySlides2" src="img_la.jpg" style="width:100%">
<img class="mySlides2" src="img_ny.jpg" style="width:100%">
<img class="mySlides2" src="img_chicago.jpg" style="width:100%">
</div>
Спробуйте самі »
Анімовані слайди
Ковзайте або поступово змінюйте елемент зверху, знизу, зліва чи справа на екрані за допомогою класів w3-animate-*.
Приклад
<img class="mySlides w3-animate-top" src="img_01.jpg">
<img class="mySlides w3-animate-bottom" src="img_02.jpg">
<img class="mySlides w3-animate-top" src="img_03.jpg">
<img class="mySlides w3-animate-bottom" src="img_04.jpg">
Спробуйте самі »
Анімація згасання
Клас w3-animate-fading плавно з’являється та згасає елемент (приблизно 10 секунд).
Приклад
<img class="mySlides w3-animate-fading" src="img_01.jpg">
<img class="mySlides w3-animate-fading" src="img_02.jpg">
<img class="mySlides w3-animate-fading" src="img_03.jpg">
<img class="mySlides w3-animate-fading" src="img_04.jpg">
Спробуйте самі »
