Не правильно считает слайды [требует правки]

Не правильно считает слайды, в консоль даже id не правильно передает.

js файл

$(document).ready(function() {
  var swiper = new Swiper('.swiper-container', {
      slidesPerView: 4,
      centeredSlides: true,
      spaceBetween: 30,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
   });
  onClickSlideChange();
});
function onClickSlideChange() {
    var id = parseInt($('.swiper-slide-active').attr("id"));
    console.log(id);
    $(".item").removeClass("item-active");
    $("#item-" + id).addClass("item-active");
}

tpl файл

<div class="swiper-container">
                    <div class="swiper-wrapper">
                        {for $start = 0 to $s_countGoods max = $s_countGoods}
                        <div class="swiper-slide" id="{$s_arrGoods[$start]["id"]}">
                            <div class="image"><img class="img-fluid" src="{$s_arrGoods[$start]["img"]}"></div>
                            <div class="title">{$s_arrGoods[$start]["name"]}</div>
                            <div class="city">{$s_arrGoods[$start]["citi"]}</div>
                        </div>
                        {/for}
                    </div>
                    <div class="swiper-button-prev" onclick="onClickSlideChange()"></div>
                    <div class="swiper-button-next" onclick="onClickSlideChange()"></div>
                </div>
                <div class="tab-content">
                    {for $start = 0 to $s_countGoods max = $s_countGoods}
                    <div class="item" id="item-{$s_arrGoods[$start]["id"]}">
                        <p>{$s_arrGoods[$start]["text"]}</p>
                    </div>
                    {/for}
                </div>