Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
0 / 0 / 0
Регистрация: 30.08.2015
Сообщений: 10

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

17.09.2015, 13:14. Показов 1349. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Вообщем надо сделать такой слайдер с возможностью авто-перелистывания. Я стырил в инете такой код, но картинка автоматически не меняется.. подскажите как можно сделать, чтобы она менялась!
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); }
Миниатюры
Нужно сделать простой слайдер  
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
17.09.2015, 13:14
Ответы с готовыми решениями:

Простой css слайдер
Добрый день. Нужен простой css слайдер, нашел подходящий вариант тут http://codepen.io/dudleystorey/pen/ehKpi или похожее тут ...

Нужно поставить слайдер по середине
Помогите поставить слайдер по середине, чёт не получается Нужно ровно под чёрной менюшкой rar-ник:

Не получается сделать простой слайдер
ППодскажите. Почему при клике у меня срабатывает функция только один раз? Последующие клики, она просто игнорирует. &lt;div...

2
0 / 0 / 0
Регистрация: 25.04.2015
Сообщений: 19
17.09.2015, 14:02
сам в слайдерах не силен, но с личного опыта посоветую использовать слайдер twitter bootstrap.
он очень простой в использовании и легко настраиваемый
0
152 / 151 / 67
Регистрация: 25.02.2015
Сообщений: 493
17.09.2015, 14:26
Ваш код подразумевает, что в блоке контролс расположены лейблы, которые ссылаются на кнопки редио, которые в зависимости от выбранной кнопки делают видимым тот или иной див с классом slide. А чтоб менялись они автоматически, то нужно писать скрипт на javascript, который бы в заданы йинтервал времени менял бы выбранную кнопку редио автоматически. Или не морочиться и найти готовый слайдер написанный на javascript.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
17.09.2015, 14:26
Помогаю со студенческими работами здесь

Сделать простой слайдер с картинками и текстом
Как сделать простой слайдер по блокам(текст+картинка) как на фото? может кто привести простой пример? P.S. Я гуглил, и довольно...

Нужно сделать слайдер автоматически переключающимся
Здравствуйте! Столкнулась с проблемой, что функция автоматического перехода слайдера странно работает: переходит с 1 на 3, не дает...

Нужно сделать из вложенного массива простой
\sum_{k=1}^{m}\prod_{i=1}^{k}(i+1)/(i^2-0.5)

Простой слайдер
Здравствуйте. Не могли бы поделиться простым слайдером на jQuery, чтобы он имел функционал как на рисунке (4 айтема активных, анимационно...

Простой слайдер
Нужно создать простой слайдер на eclipse такой как на фото только вкладка rbg


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Мысли в слух. Про "навсегда".
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 Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru