$(function () {
  sliderOurWork();
});

function sliderOurWork() {
  var nextBtn = $('.slick-next-btn'),
    prevBtn = $('.slick-prev-btn'),
    prevBtnBot = $('.slick-prev-btn--bottom'),
    nextBtnBot = $('.slick-next-btn--bottom');

  $('.slider-for').slick({
      adaptiveHeight: true,
    // variableWidth: true,
      dots: false,
      infinite: false,
      speed: 300,
      autoplay: false,
      slidesToShow: 1,
      draggable: false,
      asNavFor: '.slider-nav',
      swipe: true,
      swipeToSlide: true,
      touchMove: true,
      prevArrow: '<div class="slick-prev-btn">Назад</div>',
      nextArrow: '<div class="slick-next-btn">Вперед</div>'

      // arrows: false
    });
    $('.slider-nav').slick({
      infinite: false,
      slidesToShow: 7,
      slidesToScroll: 1,
      asNavFor: '.slider-for',
      dots: false,
      centerMode: false,
      focusOnSelect: true,
      touchMove: true,
      prevArrow: '<div class="slick-prev-btn slick-prev-btn--bottom">Назад</div>',
      nextArrow: '<div class="slick-next-btn slick-next-btn--bottom">Вперед</div>',
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 5,
            slidesToScroll: 1,
            infinite: true,
            dots: false,
            swipe: true,
            swipeToSlide: true,
            adaptiveHeight: false
          }
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 5,
            slidesToScroll: 2,
            swipe: true,
            swipeToSlide: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 4,
            slidesToScroll: 4,
            swipe: true,
            swipeToSlide: true
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2, swipe: true,
            swipeToSlide: true
          }
        }
      ]

    });

  $('.slider-for').on('afterChange', function(event, slick){
    $('.slider-nav .slick-slide').removeClass('slick-current')
      .filter('[data-slick-index='+ slick.currentSlide +']').addClass('slick-current');
  });

}