Как сделать слайд шоу html css

Step 2) Add CSS:

Style the next and previous buttons, the caption text and the dots:

Example

/* Slideshow container */
.slideshow-container max-width: 1000px;
position: relative;
margin: auto;
>

/* Hide the images by default */
.mySlides display: none;
>

/* Next & previous buttons */
.prev, .next cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
>

/* Position the «next button» to the right */
.next right: 0;
border-radius: 3px 0 0 3px;
>

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover background-color: rgba(0,0,0,0.8);
>

/* Caption text */
.text color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
>

/* Number text (1/3 etc) */
.numbertext color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
>

/* The dots/bullets/indicators */
.dot cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
>

.active, .dot:hover background-color: #717171;
>

/* Fading animation */
.fade animation-name: fade;
animation-duration: 1.5s;
>

Step 3) Add JavaScript:

Example

let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) showSlides(slideIndex += n);
>

// Thumbnail image controls
function currentSlide(n) showSlides(slideIndex = n);
>

function showSlides(n) let i;
let slides = document.getElementsByClassName(«mySlides»);
let dots = document.getElementsByClassName(«dot»);
if (n > slides.length)
if (n < 1)
for (i = 0; i < slides.length; i++) slides[i].style.display = "none";
>
for (i = 0; i < dots.length; i++) dots[i].className = dots[i].className.replace(" active", "");
>
slides[slideIndex-1].style.display = «block»;
dots[slideIndex-1].className += » active»;
>

Automatic Slideshow

To display an automatic slideshow, use the following code:

Example

let slideIndex = 0;
showSlides();

function showSlides() let i;
let slides = document.getElementsByClassName(«mySlides»);
for (i = 0; i < slides.length; i++) slides[i].style.display = "none";
>
slideIndex++;
if (slideIndex > slides.length)
slides[slideIndex-1].style.display = «block»;
setTimeout(showSlides, 2000); // Change image every 2 seconds
>

Multiple Slideshows

Example

let slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
let slideId = [«mySlides1», «mySlides2»]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) showSlides(slideIndex[no] += n, no);
>

function showSlides(n, no) let i;
let x = document.getElementsByClassName(slideId[no]);
if (n > x.length)
if (n < 1)
for (i = 0; i < x.length; i++) x[i].style.display = "none";
>
x[slideIndex[no]-1].style.display = «block»;
>

Источник

Создаем анимированное слайдшоу на CSS

Сделать анимированное слайдшоу средствами CSS. Слайдшоу можно использовать, например, в торжественных случаях для вывода фото на экран через проектор. Посредством зацикливания выводимые фото могут служить фоном для торжественной речи.

Возможное решение

Для слайдшоу возьмем странные «макрофото» Paweł Czerwiński (они прикольные).

Итак, поехали.

Наша разметка будет выглядеть так:

 
 
a-slide
 
b-slide
 
c-slide
 
d-slide
 
e-slide
 
f-slide
 
 

Фото обернуты в класс «slideshow», который используется для выравнивания элементов по горизонтали и вертикали.

.slideshow имеет следующие стили:

У нас имеется 6 фото. Каждому фото присвоен класс «i_номер фото». Под каждым фото — подпись с классом «p_номер фото».

Img имеет следующие стили:

Время анимации зависит от количества фото и времени показа каждой фотографии. В данном случае: 6 фотографий по 6 секунд каждая.

@keyframes slideshow < from < opacity: 0; filter: grayscale(100%); >5% < opacity: 1; filter: grayscale(50%); >10% < opacity: 1; filter: grayscale(0); transform: scale(1.1); >15% < opacity: 1; filter: blur(0); >20% < opacity: 0; filter: blur(2px); transform: scale(0.9); >25% < opacity: 0; >> 

Мы используем лишь 25% анимации, но в шесть шагов. 25% — это четвертая часть, поэтому фотографии будут немного накладываться друг на друга. Поскольку мы реализуем эффект «fade in-fade out», т.е. работаем с прозрачностью, это как раз то, что нам нужно.

С помощью «filter: grayscale» мы насыщаем цветом выводимую (обесцвеченную) фотографию, с помощью «transform: scale» мы масштабируем фото немного вперед при выводе и немного назад при замещении, с помощью «filter: blur» мы размываем замещаемую фотографию.

Далее работаем с отдельными фото:

.slideshow .i_1 < animation-delay: 6s; transform: translateX(-100px) rotate(-3deg); >.slideshow .i_2 < animation-delay: 12s; transform: translateX(100px) rotate(3deg); >.slideshow .i_3 < animation-delay: 18s; transform: translateY(-100px) rotate(3deg); >.slideshow .i_4 < animation-delay: 24s; transform: translateY(100px) rotate(-3deg); >.slideshow .i_5 < animation-delay: 30s; transform: rotate(-6deg); >.slideshow .i_6

Устанавливаем каждой фотографии задержку анимации (6 секунд первой и +6 секунд каждой последующей). Для разнообразия смещаем и поворачиваем каждое фото с помощью «transform: translate rotate» (значения подбирались опытным путем).

С фото закончили. Теперь займемся подписями.

Время анимации подписей соответствует времени анимации фото.

Анимация подписей выглядит намного проще:

Отдельную подпись выводим также с помощью задержки анимации:

.slideshow .p_1 < animation-delay: 7s; >.slideshow .p_2 < animation-delay: 13s; >.slideshow .p_3 < animation-delay: 19s; >.slideshow .p_4 < animation-delay: 25s; >.slideshow .p_5 < animation-delay: 31s; >.slideshow .p_6

Обратите внимание, что задержка анимации подписей на 1 секунду больше соответствующих значений фото. Это сделано для того, чтобы выводить подписи после появления и трансформации конкретной фотографии.

Вот и все. По-моему, получилось просто, но интересно.

Результат можно посмотреть здесь.

Источник