Кто имел дело с nivo slider?

@bb_oo · Регистрация: 22.11.2013

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

Всем привет! Подскажите пожалуйста, в каком куске css можно задать размер встраиваемых изображений? чтобы оно полностью растягивалось на весь слайдер?)

Добавлено через 23 секунды
Может код кому ечли что нужен)

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
/*
 * jQuery Nivo Slider v2.3
 * [url]http://nivo.dev7studios.com[/url]
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * [url]http://www.opensource.org/licenses/mit-license.php[/url]
 * 
 * March 2010
 */
 
 
/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
    width: 100%;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:60;
    display:none;
}
/* The slices in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:89;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:99;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:99;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}
#slider-wrapper {
    width:998px;
    height:392px;
}
 
#slider {
    position:relative;
    width:900px;
    height:400px;
    background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    
}
#slider a {
    border:0;
    display:block;
}
 
.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}
 
.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}
 
.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}
 
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
    clear:both;
}

@Свин=) · 05.01.2014, 23:44

покажи сайт где стоит этот слайдер,помогу с размерами.

@bb_oo · 05.01.2014, 23:56 **[ТС]**

он на локалке...

Добавлено через 45 секунд
размеры самого слайдера я задал, но не могу найти кусок, где задается ширина и высота изображения в слайдере...

@Свин=) · 06.01.2014, 04:22

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

он на локалке...

Добавлено через 45 секунд
размеры самого слайдера я задал, но не могу найти кусок, где задается ширина и высота изображения в слайдере...

по сути вот это

CSS
1
2
3
4
5
6
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;

ширина и высота изображения по полному блоку слайдера.Обычно Ниво слайдер дает размер слайдера по загружаемому изображению.

@bb_oo · 06.01.2014, 12:56 **[ТС]**

Сообщение от Свин=)

ширина и высота изображения по полному блоку слайдера.Обычно Ниво слайдер дает размер слайдера по загружаемому изображению.

если это так, то придется изменять размеры всех изображений?

@Свин=) · 06.01.2014, 12:57

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

если это так, то придется изменять размеры всех изображений?

ну зачастую так и делают.одинаковые изображения

@bb_oo · 06.01.2014, 13:00 **[ТС]**

я щас пробовал в html сразу прописать width и heght у встраиваемых изображений, но чего-ито не применяется,..

@Свин=) · 06.01.2014, 13:01

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

я щас пробовал в html сразу прописать width и heght у встраиваемых изображений, но чего-ито не применяется,..

прикрепи сюдa html css файлы свои.

@bb_oo · 06.01.2014, 13:07 **[ТС]**

Это css nivo-slider :

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
/*
 * jQuery Nivo Slider v2.3
 * [url]http://nivo.dev7studios.com[/url]
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * [url]http://www.opensource.org/licenses/mit-license.php[/url]
 * 
 * March 2010
 */
 
 
/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
    width: 100%;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:60;
    display:none;
}
/* The slices in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:89;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:99;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:99;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}
#slider-wrapper {
    width:998px;
    height:392px;
}
 
#slider {
    position:relative;
    width:900px;
    height:400px;
    background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
 
}
#slider a {
    border:0;
    display:block;
}
 
.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}
 
.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}
 
.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}
 
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
    clear:both;
}

А это html где выводится он:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="wrapper">
 
        <div id="slider-wrapper">
        
            <div id="slider" class="nivoSlider">
                <img src="/images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="/images/up.jpg"></a>
                <img src="/images/walle.jpg" alt="" />
                <img src="/images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
        
        </div>

Новые блоги и статьи Все статьи Все блоги /
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера 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 с альфа-каналом (с прозрачным. . .

@Свин=) 54 / 26 / 2 Регистрация: 12.05.2011 Сообщений: 398
	05.01.2014, 23:44
	покажи сайт где стоит этот слайдер,помогу с размерами. 0

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
	05.01.2014, 23:56 [ТС]
	он на локалке... Добавлено через 45 секунд размеры самого слайдера я задал, но не могу найти кусок, где задается ширина и высота изображения в слайдере... 0

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
	06.01.2014, 13:00 [ТС]
	я щас пробовал в html сразу прописать width и heght у встраиваемых изображений, но чего-ито не применяется,.. 0