Форум программистов, компьютерный форум, киберфорум
Наши страницы
kisk
Войти
Регистрация
Восстановить пароль
Оценить эту запись

Слайдер на чистом css с "кнопками"!

Запись от kisk размещена 19.05.2015 в 13:34
Обновил(-а) kisk 10.06.2015 в 05:51
Метки css, html, input, label, slider

Привет ленивым и не ленивым! Недавно лазил по разделу html/css и там нашел тему про фотоальбом: Фотоальбом
Который был написал на JavaScript. Автор спросил, как меняется текст под фотографиями? Конечно просто! Но я сделал именно слайдер с текстом, потратив 2 часа своего времени, которые могли бы сейчас уйти на учебу, на которой меня, собственно, не было

Пример: http://output.jsbin.com/dewahe

С обычными кнопками у нас не получится, хоть убей. За основу взят тег label, который хорошо взаимодействует с radio-input'ами и привязывает label к input
Мы присваиваем нашим инпутам имена и айди, чтобы метка могла ссылаться на эти айди.
HTML5
1
2
3
4
5
6
7
8
9
<input type="radio" name="slides" id="slide1" checked>
<input type="radio" name="slides" id="slide2">
/*Обязательно устанавливаем инпутам имена, чтобы они смогли переключаться,
а первому инпуту устанавливаем состояние checked, которое означает,
что при загрузке страницы именно этот инпут будет выбран.
*/
 
<label for="slide1">Вперед</label>
<label for="slide2">Назад</label>
Дальше всем блочным элементам с картинками, меткам присваивается position: absolute;
Картинкам, меткам присваивается opacity: 0, чтобы в дальнейшем при появлении картинки и текста была плавная анимация.

Потом мы связываем состояние инпута, картинки и метки:
CSS
1
2
3
4
5
#slide1:checked ~ .slider .images .img1 { opacity: 1; } 
/*В этом случае, когда отмечен первый инпут, то картинка показана*/
#slide2:checked ~ .slider .images .img2 { opacity: 1; }
/*Теперь, когда мы переключились на второй инпут, первый инпут у нас исчез
и появляется вторая картинка, т.к. выбран второй инпут*/
На самом деле это элементарные вещи, ничего сложного в этом нет, только занимает много времени на моторику.
Дальше мы связываем наш инпут и нашу метку:
CSS
1
2
3
#slide3:checked ~ .buttons .label:nth-of-type(1) { opacity: 1 }
/*В этом случае мы выбираем первый дочерний элемент из родительского .buttons, который покажется,
когда у нас выбран 3-ий инпут.*/
Надеюсь, что эта тема у Вас не вызовет затруднений, т.к. над слайдером через css надо поработать и Вы получите навыки.

Я не стал описывать полностью, потому что я описал главное, что требуется для такого слайдера.

Спасибо за внимание.

Код оставлю здесь.

Осторожно, коТ! :)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>"button" slider</title>
  </head>
  <body>
    <div class="container">
      
      <input type="radio" name="slides" id="slide1" checked>
      <input type="radio" name="slides" id="slide2">
      <input type="radio" name="slides" id="slide3">
      <input type="radio" name="slides" id="slide4">
      <input type="radio" name="slides" id="slide5">
      
    <h3>Наши любимцы</h3>
      
    <div class="slider">
      
      <div class="images img1"></div>
      <div class="images img2"></div>
      <div class="images img3"></div>
      <div class="images img4"></div>
      <div class="images img5"></div>
    </div>
      
    <div class="buttons">
      
      <div class="left">
        <label for="slide5">Назад</label>
        <label for="slide4">Назад</label>
        <label for="slide3">Назад</label>
        <label for="slide2">Назад</label>
        <label for="slide1">Назад</label>
      </div>
      
      <div class="right">
        <label for="slide2">Вперед</label>
        <label for="slide3">Вперед</label>
        <label for="slide4">Вперед</label>
        <label for="slide5">Вперед</label>
        <label for="slide1">Вперед</label>
      </div>
      
    </div>
      <div class="text">
        <p>Кот Вася</p>
        <p>Кот Мурзик</p>
        <p>Кот Снежок</p>
        <p>Кот Черныш</p>
        <p>Кот Ленивец</p>
      </div>
    </div>
  </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
* { transition: all .7s; }
 
body { background: #685; }
 
.container input { display: none; }
 
.slider {
  position: relative;
  width: 400px;
  height: 300px;
  border: 5px solid #b3b3b3;
  margin: 0 auto;
}
 
.images{
  position: absolute;
  width: 400px;
  height: 300px;
}
 
.img1 { background-image: url([url]http://fanscat.ru/wp-content/uploads/2013/02/vidyat-koshki.jpg);[/url] }
.img2 { background-image: url([url]http://vancats.ru/Koshki_Porodi/siamskaya_koshka_4.jpg);[/url] }
.img3 { background-image: url([url]http://www.catgallery.ru/info/cats/white-cat.jpg);[/url] }
.img4 { background-image: url([url]http://www.owoman.ru/assets/images/dom/16_09/960.jpg);[/url] }
.img5 { background-image: url([url]http://cat-and-cat.com/Data/Images/Content/2011/02/06.02.2011/002/002.jpg);[/url] }
 
.left,
.right {
  display: block;
  float: left;
  width: 55px;
  height: 20px;
  border: 1px solid #b3b3b3;
  background: linear-gradient(to top, #e3e3e3, white);
}
 
.right { margin-left: 15px; }
 
label {
  position: absolute;
  text-align: center;
  width: inherit;
  height: inherit;
  margin-top: 20px;
  transition: none;
}
 
label:active { background: linear-gradient(to top, white, #e3e3e3); }
 
label:hover { border: 1px solid #e3e3e3; }
 
.img1,
.img2,
.img3,
.img4,
.img5,
label:nth-of-type(1),
label:nth-of-type(2),
label:nth-of-type(3),
label:nth-of-type(4),
label:nth-of-type(5),
p {
  opacity: 0;
}
 
#slide1:checked ~ .slider .img1,
#slide1:checked ~ label:hover,
#slide2:checked ~ .slider .img2,
#slide2:checked ~ label:hover,
#slide3:checked ~ .slider .img3,
#slide3:checked ~ label:hover,
#slide4:checked ~ .slider .img4,
#slide4:checked ~ label:hover,
#slide5:checked ~ .slider .img5,
#slide5:checked ~ label:hover {
  opacity: 1;
}
 
#slide1:checked ~ .buttons .left label:nth-of-type(1),
#slide5:checked ~ .buttons .left label:nth-of-type(2),
#slide4:checked ~ .buttons .left label:nth-of-type(3),
#slide3:checked ~ .buttons .left label:nth-of-type(4),
#slide2:checked ~ .buttons .left label:nth-of-type(5) {
  opacity: 1;
  margin: 0;
}
 
#slide1:checked ~ .buttons .right label:nth-of-type(1),
#slide2:checked ~ .buttons .right label:nth-of-type(2),
#slide3:checked ~ .buttons .right label:nth-of-type(3),
#slide4:checked ~ .buttons .right label:nth-of-type(4),
#slide5:checked ~ .buttons .right label:nth-of-type(5) { 
  opacity: 1;
  margin: 0;
}
 
#slide1:checked ~ .text p:nth-of-type(1),
#slide2:checked ~ .text p:nth-of-type(2),
#slide3:checked ~ .text p:nth-of-type(3),
#slide4:checked ~ .text p:nth-of-type(4),
#slide5:checked ~ .text p:nth-of-type(5) {
  opacity: 1;
}
 
.buttons {
  width: 129px;
  margin: 5px auto;
}
 
.text {
  position: relative;
  width: 500px;
  height: 150px;
  border: 2px dotted #036;
  margin: 70px auto;
  text-align: center;
}
 
p {
  position: absolute;
  color: #e3e3e3;
  font-size: 2em;
  width: inherit;
  height: inherit;
  margin: 0;
  line-height: 125px;
}
 
h3 {
  text-align: center;
  color: #f0f0f0;
  font-family: Verdana;
}
Размещено в css, web
Просмотров 1088 Комментарии 0
Всего комментариев 0
Комментарии
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru