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); // Change image every 2 seconds
}
Попробуйте сами »
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>Мы планируем продавать поездки на луну в 2020-х годах</i></h1>
</div>
Попробуйте сами »
Заголовок слайд-шоу
Добавьте текст заголовка для каждого слайда изображения с помощью классов w3-display-* (topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright, left, right или middle):
Пример
<div class="w3-display-container mySlides">
<img src="img_snowtops.jpg"
style="width:100%">
<div class="w3-display-bottomleft w3-container
w3-padding-16 w3-black">
Французские Альпы
</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="img_nature_wide.jpg" style="width:100%">
<img class="mySlides"
src="img_snow_wide.jpg" style="width:100%">
<img class="mySlides"
src="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="img_nature_wide.jpg"
style="width:100%" onclick="currentDiv(1)">
</div>
<div class="w3-col s4">
<img class="demo
w3-opacity" src="img_snow_wide.jpg"
style="width:100%;display:none"
onclick="currentDiv(2)">
</div>
<div class="w3-col s4">
<img class="demo
w3-opacity" src="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">
Попробуйте сами »
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
