Подскажите какое значение задать полю, что-бы заработал код.

Есть слайдер swiper метод вроде реализован, но не могу как определить новый слайд, код ниже (вырезан лишний php код):

HTML:

1. <button type="button" data-slide="1112">1112</button>
2. while($arFields = $res->GetNext())
3.    {
4.     <div class="SliderSlide swiper-slide" style="<?= $src ?>)">
5.        ...
6.     </div>
7.     }
8.  

и код из js

Код (Javascript):

1. $('button[data-slide]').click(function(event) {
2.         var slideIndex = $(event.target).data('slide');
3.         mySwiper.slideTo(parseInt(slideIndex, 10));
4.       });

Какой класс, id или что еще надо задать слайду 1112 (<div>), чтобы на него перелистнуло при нажатии кнопки.
Помогите плиз.

 

Там всё ок на стороне php. Я выше указал что порезал код, так как там много переменных из php. 1112 тоже для примера на самом деле там <?php echo $arFields['ID']?>
Меня именно интересует что указать.
Кусок кода целиком:

Код (Text):

1. <div class="Slider swiper-container" id="slider">
2.     <div class="swiper-wrapper">
3. <button type="button" data-slide="1112">1112</button>
4.         <?php
5.         while($arFields = $res->GetNext())
6.         {
7.          ?>
8.             <div class="SliderSlide swiper-slide" slideIndex="<?php echo $arFields['ID']?>" style="background-image: url(<?= $src ?>)">
9.                 <div class="SliderSlide_Footer">
10.                     <div class="SliderSlide_Footer_Title">
11.                         <div class="SliderSlide_Footer_Name"><?php echo $arFields['NAME']?></div>
12.                         <div class="SliderSlide_Footer_Price"><?php echo $arFields['CATALOG_PURCHASING_PRICE']?>Р</div>
13.                     </div>
14.                 </div>
15.             </div>
16.             <?php
17.         }
18.         ?>
19.     </div>
20.  
21.     <div class="swiper-button-prev"> </div>
22.     <div class="swiper-button-next"></div>

 

Ошибка из консоли пропала, но по прежнему не работает. Я наверное Вас уже замучил, но прошу помочь еще раз.
Код из страницы я привёл, ниже приведу весь код из js файла. Подскажите где что изменить.

Код (Javascript):

1. $(function() {
2.   var slider = new Swiper('.swiper-container', {
3.     direction: 'horizontal',
4.     loop: false,
5.     navigation: {
6.       nextEl: '.swiper-button-next',
7.       prevEl: '.swiper-button-prev'
8.     }
9.   });
10.  
11.   var menuList = $('#menu_List');
12.  
13.   $('#menu_Button').on('click', function() {
14.     menuList.slideToggle(200);
15.   });
16.  
17.   $('#slider').on('click', function() {
18.     menuList.slideUp(200);
19.   });
20.  
21.   $('button[data-slide]').click(function(event) {
22.     var slideIndex = $(event.target).data('slide');
23.     mySwiper.slideTo(parseInt(slideIndex, 10));
24.   });
25.  
26. });

 

Немного доработал скрипт. Всё норм, но тереь не могу написать скрипт который будет определять каким "порядковый номер" слайда по полю id
На первую кнопку возвращает 0, а на остальные -1. В чём причина?

HTML:

1. <button type="button" data-slide="<?=$buttonListId?>">слайд</button>
2.  
3. <div class="SliderSlide swiper-slide" id="<?php echo $id?>" data-index="i" style="background-image: url(<?= $src ?>)">
4. </div>
5.  

Код (Javascript):

1. $('button[data-slide]').click(function(event) {
2.             var slideID = $(event.target).data('slide');
3.             var index = $(".swiper-slide").index('#' + slideID);
4.             slider.slideTo(index);
5.           });