Странный код в слайдере =)

@Kerduk · Регистрация: 24.04.2018

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

Есть кусочек кода в слайдере, который я не могу понять
(я его пометил внизу в коде JS)

В источнике откуда я взял этот скрипт сказано,
что данный отрезок кода нужен для удобства разработки.
Но я не могу понять, какой разработки?
Ведь слайдер уже полностью готов.
Даже если убрать этот странный фрагмент кода, то слайдер будет работать на ура.
Объясните пожалуйста, что делает этот странный отрезок кода.

Ссылка на рабочий пример (Codepen):
https://codepen.io/Viperx/pen/XWaXyxe

JavaScript
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
let main_block = document.querySelector('.carousel'); 
 
 
let i = 1;                                                               // Начало странного кода
for(let li of main_block.querySelectorAll('img')) {
li.style.position = 'relative';
li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
i++;
}                                                                        // Конец непонятного кода =)
 
 
let width = 400; 
let count = 1; 
let list = main_block.querySelector('.images');
let listElems = main_block.querySelectorAll('img');
let position = 0; 
 
main_block.querySelector('.prev').onclick = function() {
position += width * count;
position = Math.min(position, 0)
list.style.marginLeft = position + 'px';
};
 
main_block.querySelector('.next').onclick = function() {
position -= width * count;
position = Math.max(position, -width * (listElems.length - count));
list.style.marginLeft = position + 'px';
};

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="carousel">
 
<button class="arrow next">⇨</button>
<button class="arrow prev">⇦</button>
 
<div class="gallery">
 
<div class="images">
 
<img src="https://i.ibb.co/xSWVY16/2.jpg">
<img src="https://i.ibb.co/y6KZXKR/3.jpg">
<img src="https://i.ibb.co/525rVCY/5.png">
<img src="https://i.ibb.co/Xkh8r6F/6.jpg">
<img src="https://i.ibb.co/yFmpmB9/4.jpg">
<img src="https://i.ibb.co/TTdv5DH/1.jpg">
<img src="https://i.ibb.co/4JGjF1j/7.jpg">
 
</div>
 
</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
.carousel {
left: 50%;
top:50%;
transform: translate(-50%, -50%);
position: absolute;
width: 400px;
padding: 20px 40px;
border: 1px solid #CCC;
border-radius: 15px;
background: #eee;
}
 
.carousel img {
width: 400px;
display: block;
}
 
.arrow {
position: absolute;
top: 50%;                        
transform: translate(0, -50%);
padding:2px;
background: #ddd;
border-radius: 15px;
border: 1px solid gray;
font-size: 24px;
line-height: 24px;
color: #444;
display: block;
}
 
.prev {
left: 7px;
}
 
.next {
right: 7px;
}
 
.arrow:hover {
background: #ccc;
cursor: pointer;
}
 
.gallery {
overflow: hidden;
}
 
.images {
width: 9999px;
margin: 0;
padding: 0;
list-style: none;
transition: margin-left 250ms;
font-size: 0;
}
 
.gallery img {
display: inline-block;
}

@mr_dramm · 17.10.2021, 12:26

Не понятно какой именно фрагмент

@gogolik · 17.10.2021, 16:12

mr_dramm, с 4 по 9 строку:

JavaScript
1
2
3
// Начало странного кода
...
// Конец непонятного кода =)

@mr_dramm · 17.10.2021, 16:48

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

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

Порядковый номер картинок в разметке слайдера чтобы не запутаться, очень удобно же =)

Добавлено через 5 минут
Ну может планировалось сделать опцию показать номер картинки

@Tavashi · 17.10.2021, 17:13

Kerduk, чтобы хранить датасет для каждой картинки и обращаться к нему так, например:

JavaScript
1
main_block.querySelectorAll('img')[0].children[0]

@Kerduk · 19.10.2021, 17:03 **[ТС]**

mr_dramm,

Порядковый номер картинок в разметке слайдера чтобы не запутаться, очень удобно же =)

При помощи таких порядковых номеров можно создать
переключатель слайдера как на картинке внизу?

@mr_dramm · 20.10.2021, 14:37

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

переключатель слайдера как на картинке внизу?

нет

Добавлено через 2 минуты
нуууу можно конечно все... но время которого всегда не хватает лучше тратить более эффективно. И обед кончился...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки 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. Пошагово создадим проект для загрузки изображения. . .

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	17.10.2021, 12:26
	Не понятно какой именно фрагмент 0