Перелистывание тега span (Слайдер)

@HelloInside · Регистрация: 31.10.2011

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

Подскажите как можно перелистывать тег span с помощью кнопок-картинок которые подгружаются через css.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<span class="services_left1">
    <input type="image" src="img/left.png" alt="left">
</span>
 
<span class="text1">
    <span class="type1">ТИП</span>
    <span class="price1">ЦЕНА</span>
</span>
 
<span class="right1">
    <input type="image" src="img/right.png" alt="right">
</span>
<!-- == КНОПКИ СЛАЙДЕРА == -->
<div class="slider_btn">
      <input type="radio" name="slider" id="button1" checked >
      <input type="radio" name="slider" id="button2">
      <input type="radio" name="slider" id="button3">
      <label id="hw_serv1" for="button1"></label>
      <label id="hw_serv2" for="button2"></label>
      <label id="hw_serv3" for="button3"></label>
</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
.text1 {
    display: inline-block;
    margin: 40px 7px;
    border: 1px solid #fff;
    padding: 6px 5px;
}
 
.text1 .type1 {
    display: inline-block;
    margin-right: 50px;
    color: #fff;
}
 
.text1 .price1 {
    display: inline-block;
    color: #201659;
    font-weight: 700;
}
 
.left1 {
    margin-left: 20px;
}
 
/* кнопки слайдера*/
 
.slider_btn {
    margin-right: 0;
    margin-top: -10%;
 
}
.slider_btn input{
    display: none;
    position: absolute;
    top: 200px;
}
 
.slider_btn label {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: 2px solid #FFB600;
  cursor: pointer;
  margin-left: 3px;
}
 
 
#hw_serv1 {
}
 
#button1:checked ~ #hw_serv1,
#button2:checked ~ #hw_serv2,
#button3:checked ~ #hw_serv3,
#button4:checked ~ #hw_serv4 {
  background: #FFB600;
}

@evgeniyd · 02.08.2016, 22:12

Здравствуйте, может поможет.

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" checked>
    <input type="radio" name="point" id="slide2">
    <input type="radio" name="point" id="slide3">
    <input type="radio" name="point" id="slide4">
    <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
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
 
body {
    background-image: url([url]http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png);[/url]
}
 
.wrapper {
    height: 350px;
    margin: 100px auto 0;
    position: relative;
    width: 700px;
}
 
.slider {
    height: inherit;
    overflow: hidden;
    position: relative;
    width: inherit;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
 
.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 .5s, opacity ease-in-out .5s;
    -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 .5s, opacity ease-in-out .5s;
}
 
.slide1 { background-image: url([url]http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg);[/url] }
.slide2 { background-image: url([url]http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg);[/url] }
.slide3 { background-image: url([url]http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg);[/url] }
.slide4 { background-image: url([url]http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg);[/url] }
.slide5 { background-image: url([url]http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg);[/url] }
 
#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 > input {
    display: none;
}
 
.wrapper .controls {
    left: 50%;
    margin-left: -98px;
    position: absolute;
}
 
.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, 
#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: #ddd;
}
 
.wrapper label:after {
    border: 2px solid #ddd;
    content: " ";
    display: block;
    height: 12px;
    left: -4px;
    position: absolute;
    top: -4px;
    width: 12px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

песочница

@HelloInside · 03.08.2016, 12:33 **[ТС]**

Нашел еще один слайдер, но не получается их совместить.
На одном слайдере не получается добавить кнопки, а на другом span не перелистывается.

Первый

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="wrapper">
  <input type="radio" id="slid1" name="slid" checked />
  <input type="radio" id="slid2" name="slid" />
  <input type="radio" id="slid3" name="slid" />
    
  <div class="slider">
        <span class="slides slide1">text1</span>
        <span class="slides slide2">text2</span>
        <span class="slides slide3">text3</span>
 
    <span class="slides slide1 r">type1</span>
        <span class="slides slide2 r">type2</span>
        <span class="slides slide3 r">type3</span>
</div>
  
  <div class="button-slid"> 
    <label for="slid1"></label>  
    <label for="slid2"></label>   
    <label for="slid3"></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
.wrapper{
  width:20%;
  margin:30px auto;
  position:relative; 
}
input{
  display:none;
}
 
.slider {
    height: inherit;
    overflow: hidden;
    position: relative;
    width: inherit;
  width: 150px;
  height: 50px;
  margin-bottom: 15px;
  border: 2px solid silver;
  padding: 5px 5px;
}
 
.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 .5s, opacity ease-in-out .5s;
    -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 .5s, opacity ease-in-out .5s;
}
 
 
 
 
 
 
.button-slid{
  text-align:center;
}
label{  
  bottom:0;
  display:inline-block;
  height: 20px;
  width: 20px;
  border-radius:50%;
  border:2px solid black;
  
  cursor: pointer;
  -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;
}
label:after{
  position: absolute;
  right:0;
  display:none;
  content:'>>';
  height: 55px;
  width: 33px;
 
}
label:before{
  position: absolute;
  left:0;
  display:none;
  content:'<<';
  height: 55px;
  width: 33px;
}
 
#slid1:checked ~ .button-slid label:nth-child(1),
#slid2:checked ~ .button-slid label:nth-child(2),
#slid3:checked ~ .button-slid label:nth-child(3){
  background: silver;
}
#slid1:checked ~ .button-slid label:nth-child(2):after,
#slid1:checked ~ .button-slid label:nth-child(3):before,
#slid2:checked ~ .button-slid label:nth-child(3):after,
#slid2:checked ~ .button-slid label:nth-child(1):before,
#slid3:checked ~ .button-slid label:nth-child(1):after,
#slid3:checked ~ .button-slid label:nth-child(2):before{
  display:block;  
}

Второй

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="wrapper">
    <input type="radio" name="point" id="slide1" checked>
    <input type="radio" name="point" id="slide2">
    <input type="radio" name="point" id="slide3">
    <div class="slider">
    
  
        <span class="slides slide1">text1</span>
        <span class="slides slide2">text2</span>
        <span class="slides slide3">text3</span>
 
    <span class="slides slide1 r">type1</span>
        <span class="slides slide2 r">type2</span>
        <span class="slides slide3 r">type3</span>
 
</div>
    <div class="controls">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></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
.wrapper {
    height: 20px;
    position: relative;
    width: 140px;
  margin-left: 50px;
}
 
.r {
 left: 100px; 
}
 
.slider {
    height: inherit;
    overflow: hidden;
    position: relative;
    width: inherit;
  border: 2px solid silver;
  padding: 5px 5px;
}
 
.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 .5s, opacity ease-in-out .5s;
    -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 .5s, opacity ease-in-out .5s;
}
 
.slide1 {background-image: url([url]http://www.w3schools.com/css/trolltunga.jpg);[/url]}
.slide2 {background-image: url([url]http://www.w3schools.com/css/trolltunga.jpg);[/url]}
.slide3 {background-image: url([url]http://www.w3schools.com/css/trolltunga.jpg);[/url]}
 
#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 > input {
    display: none;
}
 
.wrapper .controls {
    left: 50%;
    margin-left: -98px;
    position: absolute;
}
 
.wrapper label {
    cursor: pointer;
    display: inline-block;
    height: 12px;
    margin: 10px 12px 0 16px;
    position: relative;
    width: 12px;
    -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, 
#slide1:checked ~ .controls label:nth-of-type(1),
#slide2:checked ~ .controls label:nth-of-type(2),
#slide3:checked ~ .controls label:nth-of-type(3) {
    background: #fff;
}
 
.wrapper label:after {
    border: 2px solid black;
    content: " ";
    display: block;
    height: 10px;
    position: absolute;
    top: -1px;
    width: 10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

@Kenworth · 03.08.2016, 15:49

На сколько я понял - то это обычная реализация слайдера.
Вот есть такие решения:
http://idangero.us/swiper/demos/#.V6Hn7_mLSHs

@HelloInside · 05.08.2016, 00:22 **[ТС]**

Обычная да не совсем )
Пробовал реализовывать через slides.min.jquery.js
Проблема в том что если один слайдер - работает все отлично! А вот если на странице несколько таких, то два варианта.
Первый это работает только один слайдер, хоть реализовано и несколько.
Второй вариант пробовал через css то переключаются все сразу.

Добавлено через 23 часа 45 минут
Если кому то понадобится, то решил проблему c помощью JQuery slides.

ЗДЕСЬ документация на русском.

Там все просто - качаете, подключаете файл slides и собственно саму библиотеку jquery.
Потом в скрипты дописываете

JavaScript
1
2
3
4
5
    <script>
        $(function(){
            $("#slides").slides();
        });
    </script>

И вот пример записи слайдера на html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <div id="slides">
        <div class="slides_container">
            <div>
                <img src="http://placehold.it/570x270">
            </div>
            <div>
                <img src="http://placehold.it/570x270">
            </div>
            <div>
                <img src="http://placehold.it/570x270">
            </div>
            <div>
                <img src="http://placehold.it/570x270">
            </div>
        </div>
    </div>

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	03.08.2016, 15:49
	На сколько я понял - то это обычная реализация слайдера. Вот есть такие решения: http://idangero.us/swiper/demos/#.V6Hn7_mLSHs 0