jQuery(document).ready(function($) {
  // 1. Находим элементы
  var $carousel = $('.index-slider-carousel__wrapper');
  var $pins = $('.index-slider-pins__item');

  // 2. Инициализируем Slick
  $carousel.slick({
    infinite: true,                 // Зациклить
    slidesToShow: 1,                // Показывать по одному слайду
    slidesToScroll: 1,
    autoplay: true,                 // Автопрокрутка
    autoplaySpeed: 3000,            // Интервал (4 секунды)
    dots: false,                    // Отключаем стандартные точки Slick
    prevArrow: $('.index-slider-carousel__nav-item_left .index-slider-carousel__nav-item-button'),
    nextArrow: $('.index-slider-carousel__nav-item_right .index-slider-carousel__nav-item-button')
  });

  // 3. При клике на пин — переключаемся на соответствующий слайд
  $pins.on('click', function() {
    var index = $(this).index();    // Номер пина (соответствует слайду)
    $carousel.slick('slickGoTo', index);
  });

  // 4. После смены слайда у всех пинов убираем активный класс
  //    и добавляем его только текущему
  $carousel.on('afterChange', function(event, slick, currentSlide) {
    $pins.removeClass('index-slider-pins__item_active');
    $pins.eq(currentSlide).addClass('index-slider-pins__item_active');
  });
});