После создания html элементов с js - все они работают вметсе одновременно а не как отдельные

@Andrews8888 · Регистрация: 21.12.2019

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

Выходит так, что я пытаюсь сделать 2 (хотя на деле их там будет очень много) контейнеров внутри которых будут свайперы (так называется плагин Swiper). Это должны быть как управляемые слайды с фото товара. Должно быть по несколько слайдов на товар.

Проблема в том, что после применения JS - все они стали работать одновременно как под копиргу друг-друга. Хотя в JS я использовал for(let...) . То есть при каждом цикле скрипт должен брать разные контейнеры и применять к ним определенный код (внутри for). Но выглядит все так словно я взял все контейнеры одновременно и поставил в них одно и то-же...

Конкретнее: есть нумерация слайдов под слайдером. Когда я меняю слайды с помощью стрелочек - подсветка данной страницы в списке под слайдером - не подсвечивается. Подсвечивается и меняется данная страница нормально только у последнего товара. Хотя если использовать любую нумерацию слайдови нажать на номер - то поменяются сразу все. То есть с помощью смены слайда нельзя управлять нумерацией а с помощью нумерации - сразу всеми слайдами можно. Последний контейнер - исключение, он работает исправно!

Вот ссылка на плагин... https://swiperjs.com/demos/

Спасибо большое если кто сможет помочь!

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
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="swiper.min.css">
    <title>Rand</title>
 
    
    <style>
        html, body {
            position: relative;
            height: 100%;
        }
 
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
            width: 100%;
            margin: auto;
        }
 
        .products {
            display: flex;
        }
 
        .product {
            margin: 10px;
            height: 50vh;
            width: 20vw;
        }
 
        .static {
            height: 100%;
        }
 
        .swiper-container {
            width: 100%;
            height: 100%;
        }
 
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
 
        .swiper-pagination {
            position: relative;
            bottom: 20px;
            right: 0px;
            width: auto !important;
            left: auto !important;
            margin: 0;
        }
 
        .swiper-pagination-bullet {
            padding: 5px 10px;
            border-radius: 0;
            width: auto;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
            color:#000;
            opacity: 1;
            background: rgba(0,0,0,0.2);
        }
 
        .swiper-pagination-bullet-active {
            color:#fff;
            background: #007aff;
        }
    </style>
    
</head>
<body> 
 
    
 
    <div class="products">
 
        <script src="swiper.min.js"></script>
        
        <button class="product">
            <div class="static">
                <!-- Slider main container -->
                <div class="swiper-container">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->
                        <div class="swiper-slide">Slide 1</div>
                        <div class="swiper-slide">Slide 2</div>
                        <div class="swiper-slide">Slide 3</div>
                    </div>
                    <!-- If we need pagination -->
                    
                
                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
 
            <div class="swiper-pagination"></div>
        </button>
 
        <button class="product">
            <div class="static">
                <!-- Slider main container -->
                <div class="swiper-container">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->
                        <div class="swiper-slide">Slide 1</div>
                        <div class="swiper-slide">Slide 2</div>
                        <div class="swiper-slide">Slide 3</div>
                    </div>
                    <!-- If we need pagination -->
                    
                
                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
 
            <div class="swiper-pagination"></div>
        </button>
 
        <button class="product">
            <div class="static">
                <!-- Slider main container -->
                <div class="swiper-container">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->
                        <div class="swiper-slide">Slide 1</div>
                        <div class="swiper-slide">Slide 2</div>
                        <div class="swiper-slide">Slide 3</div>
                    </div>
                    <!-- If we need pagination -->
                    
                
                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
 
            <div class="swiper-pagination"></div>
        </button>
 
 
        <script src="swiperscript.js"></script>
    </div>
 
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
for (let container of document.querySelectorAll(".swiper-container")) {
    var menu = ['Slide 1', 'Slide 2', 'Slide 3']
    var mySwiper = new Swiper (container, {
        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
                clickable: true,
                renderBullet: function (index, className) {
                return '<span class="' + className + '">' + (menu[index]) + '</span>';
            },
        },
 
        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
}

@vinikon · 14.06.2020, 17:54

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

выглядит все так словно я взял все контейнеры одновременно и поставил в них одно и то-же...

по коду так все и получается. я ради интереса зашел по вашей ссылке, там инициализация контейнера осуществляется так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,
 
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },
 
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
 
    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
  </script>

поскольку у вас в коде несколько контейнеров, в них надо указывать id вместо class.
я у себя не проверял, но код нескольких swiper контейнеров переделал бы так
это код одного контейнера

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<button class="product">
            <div class="static">
                <!-- Slider main container -->
                <div class="swiper-container" id="swiper1">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->
                        <div class="swiper-slide">Slide 1</div>
                        <div class="swiper-slide">Slide 2</div>
                        <div class="swiper-slide">Slide 3</div>
                    </div>
                    <!-- If we need pagination -->
                    
                
                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev" id="swiper1-prev"></div>
                    <div class="swiper-button-next" id="swiper1-next"></div>
                </div>
            </div>
 
            <div class="swiper-pagination" id="swiper1-pagination"></div>
        </button>

обратите внимание на элементы id в соответствующих тегах. для первого слайдера там индекс 1 (id="slider1"), для второго 2 (id="slider")
теперь инициализация каждого слайдера.

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
<script>
var swipers = new Array(); // объявляется один раз, здесь будем сохранять очередной объект swiper
 
// такой код для очередного слайдера (например, 1)
swipers[swipers.length - 1] = new Swiper ('#swiper1', {
    // Optional parameters
    direction: 'vertical',
    loop: true,
 
    // If we need pagination
    pagination: {
      el: '#swiper1-pagination',
    },
 
    // Navigation arrows
    navigation: {
      nextEl: '#swiper1-next',
      prevEl: '#swiper1-prev',
    },
 
    // And if we need scrollbar
    scrollbar: {
      el: '#swiper1-scrollbar',
    },
  })
</script>

для следующего блока #swiper1 надо заменить на #swiper2
попробуйте так. таким способом каждый swiper слайдер будет уникальный

Новые блоги и статьи Все статьи Все блоги /
1С: Программный отбор элементов справочника Номенклатура по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	1С: Программный отбор элементов справочника Сотрудники по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .
Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .