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

@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.

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@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