Слайдер на css

@Ilikeit · Регистрация: 20.09.2016

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

Пытаюсь добиться того, чтобы при нажатии на input сменялся блок

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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
<title>Страница</title>
</head>
<body>
 
<div class="wrapper">
<div class="labels-b">
<input type="radio" id="btn-1" name="button1">
<input type="radio" id="btn-2" name="button1">
<input type="radio" id="btn-3" name="button1">
<input type="radio" id="btn-4" name="button1">
 
<label class="label-b" for="btn-1"></label>
<label class="label-b" for="btn-2"></label>
<label class="label-b" for="btn-3"></label>
<label class="label-b" for="btn-4"></label>
</div>
<div class="slider">
<div class="slider-block-1"></div>
<div class="slider-block-2"></div>
<div class="slider-block-3"></div>
<div class="slider-block-4"></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
* {
    margin: 0px;
    padding: 0px;
}
.wrapper {
    width: 1000px;
    height: 2000px;
    margin: 0px auto;
    background: yellow;
}
.slider {
    width: 3000px;
    height: 200px;
    overflow: hidden;
}
.labels-b {
    display: block;
    text-align: center;
    background: none;
}
.label-b {
    width: 15px;
    height: 15px;
    border-radius: 35%;
    background: gray;
    display: inline-block;
    margin: 50px 15px 10px 15px;
    border: 4px solid green;
}
.labels-b :hover {
    background: #fff;
    transition: 0.3s;
}
.wrapper input[type="radio"] {
    display: none;
}
.slider-block-1 {
    width: 1000px;
    height: 200px;
    background: #B25757;
}
.slider-block-2 {
    width: 1000px;
    height: 200px;
    background: #70B257;
}
.slider-block-3 {
    width: 1000px;
    height: 200px;
    background: #B2B257;
}
.slider-block-4 {
    width: 1000px;
    height: 200px;
    background: #5764B2;
}
#bnt-1:checked ~ .slider-block-1 {
    transform: translateX(0px);
}
#bnt-2:checked ~ .slider-block-2 {
    transform: translateX(-1000px);
}

@kalabuni · 08.02.2017, 21:12

Сообщение от Ilikeit

Пытаюсь добиться того, чтобы при нажатии на input сменялся блок

прямо таки именно на CSS?
на CSS возможно слепить лишь что-то, реагирующее на наведение курсора мыши (используя псевдокласс :hover) -- и этим исчерпывается ВСЁ, что возможно сделать на CSS
нажатие (клик по элементу) отследить и обработать только с помощью CSS никак не получится

Рекомендую направить имеющиеся у вас избыточные энергию и "энтузазизм" в более продуктивное русло

@Ilikeit · 08.02.2017, 22:09 **[ТС]**

Пока что вот что вышло.

А откуда появились отступы между блоками в слайдере и почему страница так разъехалась? Подскажите, пожалуйста.

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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
<title>Страница</title>
</head>
<body>
 
<div class="wrapper">
<div class="labels-b">
<label class="label-b" for="btn-1"></label>
<label class="label-b" for="btn-2"></label>
<label class="label-b" for="btn-3"></label>
<label class="label-b" for="btn-4"></label>
</div>
<div class="slider">
<input type="radio" id="btn-1" name="button1" checked>
<input type="radio" id="btn-2" name="button1">
<input type="radio" id="btn-3" name="button1">
<input type="radio" id="btn-4" name="button1">
 
<div class="slider-block-1"></div>
<div class="slider-block-2"></div>
<div class="slider-block-3"></div>
<div class="slider-block-4"></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
* {
    margin: 0px;
    padding: 0px;
}
.wrapper {
    width: 1000px;
    height: 2000px;
    margin: 0px auto;
    background: yellow;
}
.slider {
    margin: 0px;
    padding: 0px;
    width: 4000px;
    height: 200px;
/*  overflow: hidden; */
}
.labels-b {
    display: block;
    text-align: center;
    background: none;
}
.label-b {
    width: 15px;
    height: 15px;
    border-radius: 35%;
    background: gray;
    display: inline-block;
    margin: 50px 15px 10px 15px;
    border: 4px solid green;
}
.label-b:hover {
    background: #fff;
    transition: 0.3s;
}
.wrapper input[type="radio"] {
    display: none;
}
.slider-block-1 {
    display: inline-block;
    width: 1000px;
    height: 200px;
    background: #B25757;
}
.slider-block-2 {
    display: inline-block;
    width: 1000px;
    height: 200px;
    background: #70B257;
}
.slider-block-3 {
    display: inline-block;
    width: 1000px;
    height: 200px;
    background: #B2B257;
}
.slider-block-4 {
    display: inline-block;
    width: 1000px;
    height: 200px;
    background: #5764B2;
}
#btn-1:checked ~ .slider-block-1  {
    transform: translateX(0px);
}
#btn-2:checked ~ .slider-block-2 {
    transform: translateX(-1000px);
}
#btn-3:checked ~ .slider-block-3 {
    transform: translateX(-2000px);
}
#btn-4:checked ~ .slider-block-4 {
    transform: translateX(-3000px);
}
.slider-block-1,
.slider-block-2,
.slider-block-3,
.slider-block-4 {
    transition: 0.3s;
}

Добавлено через 14 минут
4 блок не появляется и отступы между блоками, как поправить?

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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
<title>Страница</title>
</head>
<body>
 
<div class="wrapper">
<div class="wrapper-slider">
<div class="labels-b">
<label class="label-b" for="btn-1"></label>
<label class="label-b" for="btn-2"></label>
<label class="label-b" for="btn-3"></label>
<label class="label-b" for="btn-4"></label>
</div>
<div>
<input type="radio" id="btn-1" name="button1" checked>
<input type="radio" id="btn-2" name="button1">
<input type="radio" id="btn-3" name="button1">
<input type="radio" id="btn-4" name="button1">
 
<div class="slider">
 
<div class="slider-block-1"></div>
<div class="slider-block-2"></div>
<div class="slider-block-3"></div>
<div class="slider-block-4"></div>
</div>
</div>
 
</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
* {
    margin: 0px;
    padding: 0px;
}
.wrapper {
    width: 1000px;
    height: 2000px;
    margin: 0px auto;
    background: yellow;
    
}
.wrapper-slider {
    overflow: hidden;
}
.slider {
    margin: 0px;
    padding: 0px;
    width: 4000px;
    height: 200px;
    overflow: hidden;
    transition: 0.3s;
}
.labels-b {
    display: block;
    text-align: center;
    background: none;
}
.label-b {
    width: 15px;
    height: 15px;
    border-radius: 35%;
    background: gray;
    display: inline-block;
    margin: 50px 15px 10px 15px;
    border: 4px solid green;
}
.label-b:hover {
    background: #fff;
    transition: 0.3s;
}
.wrapper input[type="radio"] {
    display: none;
}
.slider-block-1 {
    display: inline-block;
    width: 1000px;
    height: 200px;
    background: #B25757;
}
.slider-block-2 {
    display: inline-block;
    width: 1000px;
    height: 200px;
    background: #70B257;
}
.slider-block-3 {
    display: inline-block;
    width: 1000px;
    height: 200px;
    background: #B2B257;
}
.slider-block-4 {
    display: inline-block;
    width: 1000px;
    height: 200px;
    background: #5764B2;
}
#btn-1:checked ~ .slider {
    transform: translateX(0px);
}
#btn-2:checked ~ .slider {
    transform: translateX(-1000px);
}
#btn-3:checked ~ .slider {
    transform: translateX(-2000px);
}
#btn-4:checked ~ .slider {
    transform: translateX(-3000px);
}

@kalabuni · 08.02.2017, 22:29

Сообщение от Ilikeit

А откуда появились отступы между блоками в слайдере

перевод строки в HTML-коде браузер всегда преобразовывает в неразрывный пробел, т.е. содержимое <div class="slider"></div>
отображается как блокпробелблокпробелблокпробел
пробел -- это символ текста, имеющий по умолчанию какой-то font-size, вот эта самая величина и определяет размер отступов между блоками
хотите без отступов -- пишите код слитно, без пробелов и переносов строк, либо для контейнера класса slider пропишите {font-size: 0}

Сообщение от Ilikeit

и почему страница так разъехалась?

и этот, и предыдущий вопрос вам бы надо задать на соответствующем форуме HTML и CSS -- к яваскрипту ваша кривая вёрстка никакого отношения НЕ ИМЕЕТ

@sit_a · 09.02.2017, 10:03

Здравствуйте!
Если вопрос в том, чтобы сделать слайдер именно на css, то рекомендую посмотреть этот пример ( https://www.reddit.com/r/web_d... _required/ ), сам в свое время с этим столкнулся. У меня все заработало. Все щелкается и на css (а точнее на scss)
Успехов вам)

@Fedor92 · 09.02.2017, 19:35

Ilikeit, хорошая мысль сделать слайдер на css...

Зачем хвататься за javascript где можно обойтись стилями?

CSS3 позволяет делать множество сложных анимационных эффектов, которые раньше можно было реализовать только с помощью JS...

Сообщение от Ilikeit

отступы между блоками, как поправить

С отступами всё просто... Блоки с классами: .slider-block-1, .slider-block-2, .slider-block-3, .slider-block-4 в css Вы задали свойство display:inline-block, после этого и появились отступы, поскольку блоки теперь воспринимаются, как инлайновые элементы... Решается легко, достаточно display:inline-block заменить на float:left или использовать flexbox при вёрстке... Для того, чтобы блоки не выпали из потока, дополнительно можно задать родительскому блоку свойство overflow:hidden... font-size:0 использовать крайне не рекомендую... Если в слайдах будут ссылки или другое текстовое содержимое, то поисковым роботом при сканировании сайта, подобные вещи могут быть восприняты, как скрытая реклама и приведут к тому, что можно потерять позиции в ранжирировании сайта при выдаче...

Сообщение от kalabuni

ваша кривая вёрстка

Это по каким критериям она кривая?

Добавлено через 1 минуту
sit_a, хороший слайдер...

Если его ещё прокачать и добавить анимационных эффектов, вообще конфетка будет...

@sit_a · 10.02.2017, 00:28

Здравствуйте!
Рад что вам понравилось) Я сам когда столкнулся с данной темой и ее реализацией был приятно удивлен)
Удачи)

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@sit_a 16 / 16 / 11 Регистрация: 17.06.2016 Сообщений: 61
	09.02.2017, 10:03
	Здравствуйте! Если вопрос в том, чтобы сделать слайдер именно на css, то рекомендую посмотреть этот пример ( https://www.reddit.com/r/web_d... _required/ ), сам в свое время с этим столкнулся. У меня все заработало. Все щелкается и на css (а точнее на scss) Успехов вам) 2

@sit_a 16 / 16 / 11 Регистрация: 17.06.2016 Сообщений: 61
	10.02.2017, 00:28
	Здравствуйте! Рад что вам понравилось) Я сам когда столкнулся с данной темой и ее реализацией был приятно удивлен) Удачи) 0