Нужно сделать простой слайдер

@warcevil · Регистрация: 30.08.2015

Студворк — интернет-сервис помощи студентам

Вообщем надо сделать такой слайдер с возможностью авто-перелистывания. Я стырил в инете такой код, но картинка автоматически не меняется.. подскажите как можно сделать, чтобы она менялась!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="wrapper">
    <input type="radio" name="point" id="slide1">
    <input type="radio" name="point" id="slide2">
    <input type="radio" name="point" id="slide3">
    <input type="radio" name="point" id="slide4" checked>
    <input type="radio" name="point" id="slide5">
    <div class="slider">
        <div class="slides slide1"></div>
        <div class="slides slide2"></div>
        <div class="slides slide3"></div>
        <div class="slides slide4"></div>
        <div class="slides slide5"></div>
    </div>  
    <div class="controls">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
        <label for="slide5"></label>
    </div>
</div>

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
.slides {
    height: inherit;
    opacity: 0;
    position: absolute;
    width: inherit;
    z-index: 0;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: transform ease-in-out .1s, opacity ease-in-out .1s;
    -moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    transition: transform ease-in-out .1s, opacity ease-in-out .1s;
}
 
#slide1:checked ~ .slider > .slide1,
#slide2:checked ~ .slider > .slide2,
#slide3:checked ~ .slider > .slide3,
#slide4:checked ~ .slider > .slide4,
#slide5:checked ~ .slider > .slide5 {
    opacity: 1;
    z-index: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.wrapper label {
    cursor: pointer;
    display: inline-block;
    height: 8px;
    margin: 25px 12px 0 16px;
    position: relative;
    width: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background ease-in-out .5s;
    -moz-transition: background ease-in-out .5s;
    -o-transition: background ease-in-out .5s;
    transition: background ease-in-out .5s;
}
.wrapper label:hover {
    background: #654339;
}
#slide1:checked ~ .controls label:nth-of-type(1),
#slide2:checked ~ .controls label:nth-of-type(2),
#slide3:checked ~ .controls label:nth-of-type(3),
#slide4:checked ~ .controls label:nth-of-type(4),
#slide5:checked ~ .controls label:nth-of-type(5) {
    background: #654339;
    border:  solid 2px #a98868;
}
.wrapper .controls {
    left: 50%;
    margin-left: -98px;
    position: absolute;
}
 
.wrapper label {
    background-color: #e2b879;
    cursor: pointer;
    display: inline-block;
    height: 9px;
    margin: 25px 12px 0 16px;
    position: relative;
    width: 9px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
     box-shadow: inset 0 1px 0  rgba(0,0,0,0.5);
}
.wrapper label:after {
    content: " ";
    display: block;
    height: 13px;
    left: -3px;
    position: absolute;
    top: -3px;
    width: 13px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.wrapper {
    height: 322px;
    margin-top: 0px;
    position: relative;
    width: 100%;
}
 
.slider {
    background-color: #ddd;
    height: inherit;
    overflow: hidden;
    position: relative;
    width: inherit;
    -webkit-box-shadow: 0px  3px  10px rgba(0,0,0,0.3); 
    -moz-box-shadow: 0px  3px  10px rgba(0,0,0,0.3); 
    -o-box-shadow: 0px  3px  10px rgba(0,0,0,0.3);
    box-shadow: 0px  3px  10px rgba(0,0,0,0.3);
 
}
.wrapper > input {
    display: none;
}
.slides {
    height: inherit;
    position: absolute;
    width: inherit;
    background-size: 100% 100%;
}
 
.slide1 { background-image: url(images/slide1.jpg); }
.slide2 { background-image: url(images/slide2.jpg); }
.slide3 { background-image: url(images/slide3.jpg); }
.slide4 { background-image: url(images/slide4.jpg); }
.slide5 { background-image: url(images/slide5.jpg); }

@Posipaka · 17.09.2015, 14:02

сам в слайдерах не силен, но с личного опыта посоветую использовать слайдер twitter bootstrap.
он очень простой в использовании и легко настраиваемый

@Karssen · 17.09.2015, 14:26

Ваш код подразумевает, что в блоке контролс расположены лейблы, которые ссылаются на кнопки редио, которые в зависимости от выбранной кнопки делают видимым тот или иной див с классом slide. А чтоб менялись они автоматически, то нужно писать скрипт на javascript, который бы в заданы йинтервал времени менял бы выбранную кнопку редио автоматически. Или не морочиться и найти готовый слайдер написанный на javascript.

Новые блоги и статьи Все статьи Все блоги /
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .

@Posipaka 0 / 0 / 0 Регистрация: 25.04.2015 Сообщений: 19
	17.09.2015, 14:02
	сам в слайдерах не силен, но с личного опыта посоветую использовать слайдер twitter bootstrap. он очень простой в использовании и легко настраиваемый 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	17.09.2015, 14:26
	Ваш код подразумевает, что в блоке контролс расположены лейблы, которые ссылаются на кнопки редио, которые в зависимости от выбранной кнопки делают видимым тот или иной див с классом slide. А чтоб менялись они автоматически, то нужно писать скрипт на javascript, который бы в заданы йинтервал времени менял бы выбранную кнопку редио автоматически. Или не морочиться и найти готовый слайдер написанный на javascript. 0