НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP ЯК ЗРОБИТИ W3.CSS JQUERY XML JAVA GO БІЛЬШЕ 🔍 ◑ КНИГИ ДОВІДНИКИ ВПРАВИ
W3CSS. W3Schools українською. Уроки для початківців

En

W3.CSS Слайд-шоу

❮ Prev Next ❯
Slideshow
Текст підпису

Слайд-шоу вручну

Відображати слайд-шоу вручну за допомогою 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)">&#10094;</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</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).

Автоматичне слайд-шоу

Automatic Slideshow

Відображати автоматичне слайд-шоу ще простіше.

Вам потрібен лише трохи інший код 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

Приклад

<div class="mySlides">
  <div class="w3-container w3-red">
    <h1><b>Чи знаєте ви?</b></h1>
    <h1><i>До 2025 року на Земній кулі має бути повністю знищено всіх московитів як хибну гілку еволюції</i></h1>
  </div>
</div>
Спробуйте самі »

Підпис до слайд-шоу

Snow, Norway
Snow, Norway

Додайте текст підпису для кожного слайда зображення за допомогою класів 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)">&#10094; Prev</button>
  <button class="w3-button" onclick="plusDivs(1)">Next &#10095;</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)">&#10094;</div>
    <div class="w3-right" onclick="plusDivs(1)">&#10095;</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">
Спробуйте самі »
❮ Prev Next ❯