Slick slider

                                // https://kenwheeler.github.io/slick

var sliderSlick = $('.slider_slick')

sliderSlick.slick({

	// lazyLoad: 'ondemand', // img data-lazy="img/name.jpg" // Lazy load загрузка картинок

    slidesToShow: 3,
    slidesToScroll: 1,
    //autoplay: true,
    autoplaySpeed: 5000,
    infinite: true,
    dots: false,
    arrows: true,
    nextArrow: '<i class="fa fa-chevron-right slick-arrow slick-arrow-right" aria-hidden="true"></i>',
    prevArrow: '<i class="fa fa-chevron-left slick-arrow slick-arrow-left" aria-hidden="true"></i>',
    pauseOnHover: true,
    //variableWidth: true,
    //lazyLoad: 'ondemand', // ondemand progressive
    //draggable: false,
    //centerMode: true,
    //centerPadding: '0', // default 50px
    responsive: [
        {
            breakpoint: 1200,
            settings: {
                slidesToShow: 2,
            }
        },
        {
            breakpoint: 769,
            settings: {
                slidesToShow: 1,
                arrows: false,
                dots: true,
            }
        },
        {
            breakpoint: 577,
            settings: {
                slidesToShow: 1,
                arrows: false,
                dots: true,
            }
        }
    ]
})
    
// Убираем мелькание картинок при загрузки слайдера, т.е. после загрузки js показываем слайдер
$('.slider-slick').show()

if (!sliderSlick.hasClass('slick-initialized')) {} // Если слайдер не инициализирован, то запустим его

sliderSlick.slick('destroy') // Разинициализировать слайдер
    
    
// Слайдер с навигацией
var sliderForEl = '.slider_for',
    sliderNavEl = '.slider_nav',
    sliderFor = $(slideForEl),
    sliderNav = $(slideNavEL)

// Основной слайдер
sliderFor.slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    dots: false,
    asNavFor: sliderNavEl,
})

// Навигация
sliderNav.slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: sliderForEl,
    focusOnSelect: true,
    dots: false,
    arrows: true,
    prevArrow: '<i class="fa fa-long-arrow-left slick-arrow-left" aria-hidden="true"></i>',
    nextArrow: '<i class="fa fa-long-arrow-right slick-arrow-right" aria-hidden="true"></i>',
    //centerMode: true,
    //vertical: true,
    //centerPadding: '0', // default 50px
    //verticalSwiping: true,
})
    
    
    
// Sass
// Убираем мелькание картинок при загрузки слайдера, т.е. после загрузки js показываем слайдер
.slick-slider {
  display: none;
}

// Убираем синию обводку
.slick-slide,
.slick-slide * {
  outline: none !important;
}


// Когда последний или первый элемент делаем полу скрытую стрелку
.arrow-hide .slick-arrow[aria-disabled=true] { // Установить класс .arrow-hide на класс запуска слайдера
  opacity: .3;
  cursor: auto;
  &:hover {
    color: $secondary; // любой цвет, если надо
  }
}



// Событие перед сменой слайдов
$('.slick-gallery').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
	console.log(nextSlide)
})

    
    
// Миксины
@mixin slick-dots($color: $white, $bottom: 25px) {
  .slick-dots {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-left: 0;
    position: absolute;
    bottom: $bottom;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    z-index: $z-index-min - 8;
    li {
      display: inline-block;
      margin-right: 15px;
      &.slick-active button {
        width: 15px;
        height: 15px;
        background-color: transparent;
        border: 2px solid $color;
      }
      button {
        padding: 0;
        width: 8px;
        height: 8px;
        font-size: 0;
        background-color: $color;
        border: none;
        border-radius: 50%;
        &:focus {
          outline: none;
        }
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }


  @media (max-width: 992px) {
    .slick-dots {
      @if $bottom == auto {
        bottom: $bottom;
      } @else {
        bottom: $bottom * 2;
      }
    }
  }

  @media (max-width: 576px) {
    $rate: .8;
    .slick-dots {
      li {
        margin-right: 15px * $rate;
        &.slick-active button {
          width: 15px * $rate;
          height: 15px * $rate;
        }
        button {
          width: 8px * $rate;
          height: 8px * $rate;
        }
      }
    }
  }
}

@mixin slick-slider-arrow-inside($font-size: $font-size-base * 3.2, $color: $white) {
  .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba($color, .4);
    font-size: $font-size;
    cursor: pointer;
    z-index: $z-index-min - 8;
    @include transition();
    &:hover {
      color: rgba($color, .7);
    }
    &-left {
      left: $spacer * 2.4;
    }
    &-right {
      right: $spacer * 2.4;
    }
  }
}

@mixin slick-slider-arrow($top: 50%) {
    .slick {
        &-list {
            width: 97%;
            margin: 0 auto;
        }
        &-arrow {
            position: absolute;
            top: $top;
            @if $top == 50% {
                transform: translateY(-50%);
            }
            font-size: 2rem;
            color: rgba($dark, .5);
            cursor: pointer;
            z-index: $z-index-min - 8;
            @include transition();
            &:hover {
                color: $dark;
            }
            &-right {
                right: -.8rem;
            }
            &-left {
                left: -.8rem;
            }
        }
    }

    @media (max-width: 768px) {
        .slick {
            &-arrow {
                &-right {
                    right: 0;
                }
                &-left {
                    left: 0;
                }
            }
        }
    }
}

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" defer></script>
Список