[Meshock]

Анимации автоматической и не должно быть — рехнешься, когда на странице будут автоматом "каруселить", скажем, 5 таких огромных слайдеров
"Цветные полоски" (слайды class="slide") сдвигаются влево/вправо только после клика по дивам class="arrow". Если бы код выдавал ошибку, я бы ее исправил , но ошибок в консоли нет, поэтому не знаю куда двигаться дальше
Да, и криво начинает срабатывать при множественном нажатии на направляющих див class="arrow".

добавлю еще CSS, чтобы верстка не ехала у вас

.case__container {
  height: 700px;
  width: 100%;
  overflow: hidden; }
  /* line 15, E:/Web projects/mikejuice/src/scss/layout/_portfolio-section.scss */
  .case__container .slider-wrap {
    position: relative;
    width: 1100px;
    margin: 0 auto; }
    /* line 20, E:/Web projects/mikejuice/src/scss/layout/_portfolio-section.scss */
    .case__container .slider-wrap .slider {
      position: absolute;
      width: 4400px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      z-index: 1; }
      /* line 26, E:/Web projects/mikejuice/src/scss/layout/_portfolio-section.scss */
      .case__container .slider-wrap .slider .slide {
        height: 700px;
        width: 1100px; }
      /* line 31, E:/Web projects/mikejuice/src/scss/layout/_portfolio-section.scss */
      .case__container .slider-wrap .slider .slide-first {
        margin-left: 0; }

/* line 38, E:/Web projects/mikejuice/src/scss/layout/_portfolio-section.scss */
.arrow {
  width: 40px;
  height: 40px;
  background-color: green;
  position: absolute;
  margin-top: 330px;
  z-index: 2; }

/* line 47, E:/Web projects/mikejuice/src/scss/layout/_portfolio-section.scss */
.arrow-left {
  left: 40px; }

/* line 51, E:/Web projects/mikejuice/src/scss/layout/_portfolio-section.scss */
.arrow-right {
  right: 40px; }

UPD Может попробовать координаты margin-left записывать в data-* тегов и считывать как-то оттуда? Есть идеи?