Слайдшоу | HTML/CSS

У меня есть статья "Смена картинки при наведении курсора". Всё хорошо, но непонятно как это применить, когда изображений 3 и более. Чтобы они менялись в цикле, но по щелчку. Ничего нового не придумала, а фактически сделала тоже самое.

1-ый вариант слайдшоу

<style>
.demo {
  position: relative;
  padding-top: 50%;
}
.demo input { display: none; }
.demo label { transition: 3s; }
.demo img {
  position: absolute; 
  left: 50%;
  top: 50%;
  max-width: 100%;
  max-height: 100%;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.demo label,
.demo #vkl1:checked ~ [for="vkl1"],
.demo #vkl2:checked ~ [for="vkl2"],
.demo #vkl3:checked ~ [for="vkl3"],
.demo #vkl4:checked ~ [for="vkl4"],
.demo #vkl5:checked ~ [for="vkl5"] {
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden; opacity: 0;
}
.demo #vkl1:checked ~ [for="vkl2"],
.demo #vkl2:checked ~ [for="vkl3"],
.demo #vkl3:checked ~ [for="vkl4"],
.demo #vkl4:checked ~ [for="vkl5"],
.demo #vkl5:checked ~ [for="vkl1"] {visibility: visible; opacity: 1;}
</style>

<div class="demo">
<input type="radio" name="odin" id="vkl1"/>
<input type="radio" name="odin" id="vkl2"/>
<input type="radio" name="odin" id="vkl3"/>
<input type="radio" name="odin" id="vkl4"/>
<input type="radio" name="odin" id="vkl5" checked="checked"/>

<label for="vkl1"><img src="адрес_изо_1"/></label>
<label for="vkl2"><img src="адрес_изо_2"/></label>
<label for="vkl3"><img src="адрес_изо_3"/></label>
<label for="vkl4"><img src="адрес_изо_4"/></label>
<label for="vkl5"><img src="адрес_изо_5"/></label>
</div>

2-ой вариант слайдшоу

Нужно заменить 
visibility: visible; opacity: 1;
на
transform: scale(1); z-index: 1;
и 
visibility: hidden; opacity: 0;
на
transform: scale(0);

3-ий вариант слайдшоу

Нужно заменить 
visibility: visible; opacity: 1;
на
clip: rect(0, 1000px, auto, 0);
и 
visibility: hidden; opacity: 0;
на
clip: rect(0, 1000px, auto, 1000px);

4-ый вариант слайдшоу

Нужно заменить 
.demo {
  position: relative;
  padding-top: 50%;
}
на
.demo {
  position: relative;
  padding-top: 50%;
  perspective: 1000px;
}
.demo label,
.demo #vkl1:checked ~ [for="vkl1"],
.demo #vkl2:checked ~ [for="vkl2"],
.demo #vkl3:checked ~ [for="vkl3"],
.demo #vkl4:checked ~ [for="vkl4"],
.demo #vkl5:checked ~ [for="vkl5"] {
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden; opacity: 0;
}
.demo #vkl1:checked ~ [for="vkl2"],
.demo #vkl2:checked ~ [for="vkl3"],
.demo #vkl3:checked ~ [for="vkl4"],
.demo #vkl4:checked ~ [for="vkl5"],
.demo #vkl5:checked ~ [for="vkl1"] {visibility: visible; opacity: 1;}
на
.demo label,
.demo #vkl1:checked ~ [for="vkl1"],
.demo #vkl2:checked ~ [for="vkl2"],
.demo #vkl3:checked ~ [for="vkl3"],
.demo #vkl4:checked ~ [for="vkl4"],
.demo #vkl5:checked ~ [for="vkl5"] {
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);  visibility: hidden; backface-visibility: hidden;
}
.demo #vkl1:checked ~ [for="vkl3"],
.demo #vkl2:checked ~ [for="vkl4"],
.demo #vkl3:checked ~ [for="vkl5"],
.demo #vkl4:checked ~ [for="vkl1"],
.demo #vkl5:checked ~ [for="vkl2"] {transform: rotateY(-180deg); visibility: hidden;}
.demo #vkl1:checked ~ [for="vkl2"],
.demo #vkl2:checked ~ [for="vkl3"],
.demo #vkl3:checked ~ [for="vkl4"],
.demo #vkl4:checked ~ [for="vkl5"],
.demo #vkl5:checked ~ [for="vkl1"] {transform: rotateY(0deg); visibility: visible;}

5-ый вариант слайдшоу

Нужно заменить 
visibility: visible; opacity: 1;
на
transform: translateY(0);
и 
visibility: hidden; opacity: 0;
на
transform: translateY(150%) rotate(17deg);

6-ой вариант слайдшоу

Нужно заменить 
.demo {
  position: relative;
  padding-top: 50%;
}
на
.demo {
  position: relative;
  padding-top: 50%;
  overflow: hidden;
}
и 
.demo label,
.demo #vkl1:checked ~ [for="vkl1"],
.demo #vkl2:checked ~ [for="vkl2"],
.demo #vkl3:checked ~ [for="vkl3"],
.demo #vkl4:checked ~ [for="vkl4"],
.demo #vkl5:checked ~ [for="vkl5"] {
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden; opacity: 0;
}
.demo #vkl1:checked ~ [for="vkl2"],
.demo #vkl2:checked ~ [for="vkl3"],
.demo #vkl3:checked ~ [for="vkl4"],
.demo #vkl4:checked ~ [for="vkl5"],
.demo #vkl5:checked ~ [for="vkl1"] {visibility: visible; opacity: 1;}
на
.demo label,
.demo #vkl1:checked ~ [for="vkl1"],
.demo #vkl2:checked ~ [for="vkl2"],
.demo #vkl3:checked ~ [for="vkl3"],
.demo #vkl4:checked ~ [for="vkl4"],
.demo #vkl5:checked ~ [for="vkl5"] {
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%); opacity: 0;
}
.demo #vkl1:checked ~ [for="vkl3"],
.demo #vkl2:checked ~ [for="vkl4"],
.demo #vkl3:checked ~ [for="vkl5"],
.demo #vkl4:checked ~ [for="vkl1"],
.demo #vkl5:checked ~ [for="vkl2"] {
  transform: translateX(-100%); opacity: 0;
}
.demo #vkl1:checked ~ [for="vkl2"],
.demo #vkl2:checked ~ [for="vkl3"],
.demo #vkl3:checked ~ [for="vkl4"],
.demo #vkl4:checked ~ [for="vkl5"],
.demo #vkl5:checked ~ [for="vkl1"] {transform: translateX(0); opacity: 1;}

7-ой вариант слайдшоу

Нужно заменить 
.demo label,
.demo #vkl1:checked ~ [for="vkl1"],
.demo #vkl2:checked ~ [for="vkl2"],
.demo #vkl3:checked ~ [for="vkl3"],
.demo #vkl4:checked ~ [for="vkl4"],
.demo #vkl5:checked ~ [for="vkl5"] {
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden; opacity: 0;
}
.demo #vkl1:checked ~ [for="vkl2"],
.demo #vkl2:checked ~ [for="vkl3"],
.demo #vkl3:checked ~ [for="vkl4"],
.demo #vkl4:checked ~ [for="vkl5"],
.demo #vkl5:checked ~ [for="vkl1"] {visibility: visible; opacity: 1;}
на
.demo label,
.demo #vkl1:checked ~ [for="vkl1"],
.demo #vkl2:checked ~ [for="vkl2"],
.demo #vkl3:checked ~ [for="vkl3"],
.demo #vkl4:checked ~ [for="vkl4"],
.demo #vkl5:checked ~ [for="vkl5"] {
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.demo #vkl1:checked ~ [for="vkl3"],
.demo #vkl2:checked ~ [for="vkl4"],
.demo #vkl3:checked ~ [for="vkl5"],
.demo #vkl4:checked ~ [for="vkl1"],
.demo #vkl5:checked ~ [for="vkl2"] {
  transform: perspective(1000px) translateX(50%) rotateY(75deg);
}
.demo #vkl1:checked ~ [for="vkl2"],
.demo #vkl2:checked ~ [for="vkl3"],
.demo #vkl3:checked ~ [for="vkl4"],
.demo #vkl4:checked ~ [for="vkl5"],
.demo #vkl5:checked ~ [for="vkl1"] { transform: rotateY(0); z-index: 1; visibility: visible;}

8-ой вариант слайдшоу

Нужно заменить 
.demo {
  position: relative;
  padding-top: 50%;
}
на
.demo {
  position: relative;
  padding-top: 50%;
  overflow: hidden;
}
и 
.demo label,
.demo #vkl1:checked ~ [for="vkl1"],
.demo #vkl2:checked ~ [for="vkl2"],
.demo #vkl3:checked ~ [for="vkl3"],
.demo #vkl4:checked ~ [for="vkl4"],
.demo #vkl5:checked ~ [for="vkl5"] {
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden; opacity: 0;
}
.demo #vkl1:checked ~ [for="vkl2"],
.demo #vkl2:checked ~ [for="vkl3"],
.demo #vkl3:checked ~ [for="vkl4"],
.demo #vkl4:checked ~ [for="vkl5"],
.demo #vkl5:checked ~ [for="vkl1"] {visibility: visible; opacity: 1;}
на
.demo label,
.demo #vkl1:checked ~ [for="vkl1"],
.demo #vkl2:checked ~ [for="vkl2"],
.demo #vkl3:checked ~ [for="vkl3"],
.demo #vkl4:checked ~ [for="vkl4"],
.demo #vkl5:checked ~ [for="vkl5"] {
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-60%) scale(.7); z-index: 2;
}
.demo #vkl1:checked ~ [for="vkl3"],
.demo #vkl2:checked ~ [for="vkl4"],
.demo #vkl3:checked ~ [for="vkl5"],
.demo #vkl4:checked ~ [for="vkl1"],
.demo #vkl5:checked ~ [for="vkl2"] {
  transform: translateX(60%) scale(.7); z-index: 2;
}
.demo #vkl1:checked ~ [for="vkl4"],
.demo #vkl2:checked ~ [for="vkl5"],
.demo #vkl3:checked ~ [for="vkl1"],
.demo #vkl4:checked ~ [for="vkl2"],
.demo #vkl5:checked ~ [for="vkl3"],
.demo #vkl1:checked ~ [for="vkl5"],
.demo #vkl2:checked ~ [for="vkl1"],
.demo #vkl3:checked ~ [for="vkl2"],
.demo #vkl4:checked ~ [for="vkl3"],
.demo #vkl5:checked ~ [for="vkl4"] {
  z-index: 1;
}
.demo #vkl1:checked ~ [for="vkl2"],
.demo #vkl2:checked ~ [for="vkl3"],
.demo #vkl3:checked ~ [for="vkl4"],
.demo #vkl4:checked ~ [for="vkl5"],
.demo #vkl5:checked ~ [for="vkl1"] { transform: translateX(0); z-index: 4; visibility: visible;}
в f t
наверх ↑

16 комментариев:

real nicks
а как сделать ссылку для каждого слайда
NMitra
Вместо
<label for="vkl1"><img src="адрес_изо_1"/></label>
написать
<label for="vkl1"><img src="адрес_изо_1"/><a href="URL">текст с ссылкой</a></label>

Вместо
.demo img {
position: absolute;
left: 50%;
top: 50%;
max-width: 100%;
max-height: 100%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
можно написать что-то вроде
.demo img {
position: absolute;
left: 50%;
top: 40%;
max-width: 100%;
max-height: 80%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.demo a {
display: block;
position: absolute;
left: 50%;
top: 90%;
max-width: 100%;
max-height: 20%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
Анонимный
Спасибо за статью. Но возник вопрос: как разместить несколько таких слайдшоу на одной странице?
NMitra
У каждого input должен быть неповторимый id, который должен совпадать с for у label. У группы input должен быть неповторимый name.

Сообщите, если непонятно написала
Анонимный
Спасибо за ответ! Всё получилось.
Анонимный
Спасибо за статью. Но есть еще вопрос: как разместить текст для каждого изображения либо рядом либо наслоением?
NMitra
Для какого варианта? Можно использовать или псевдоэлементы или span
Alex Shi
спасибо, всё работает
Yk
Пасиб
Yk
Только пока не соображу как больше слайдов сделать)
NMitra
Согласна, это не просто :) Нужно добавлять input, label, img, а также добавлять селекторы в CSS
Yk
Все получилоссь, просто нужно понять логику кода)
Анонимный
Спасибо за материал. Очень пригодилось.
Подскажите как сделать в рамках этих слайдов чтобы у фотографий были скругленные края?
Заранее спасибо за ответ.
NMitra
Попробуйте так (вместо 15px своё значение, подробнее http://shpargalkablog.ru/2011/02/zakruglennye-ugly-css.html )

.demo img {
border-radius: 15px;
}
Unknown
как сделать чтобы картинки сменялись по клику на кнопку?
NMitra
Извините, ответ требует больше времени, чем я располагаю http://shpargalkablog.ru/p/comments-blog.html