В slick slider добавлять класс при событии draggable

280

19 января 2018, 22:38

Подскажите как реализовать чтобы при событии в слайдере draggable нужному блоку work-links добавлялся класс active, а сотальным удалялся, чтобы не как костыль был, а при любой смене слайдера менялись и соответствующие блоки, тоесть подкрашивались желтым цветом

$('.our-work-slider').slick({ 
  infinite: true, 
  arrows: true, 
  draggable: true, 
  fade: true 
}); 
 
$('.work-link-item').click(function() { 
  $('.work-link-item').removeClass('active'); 
  $(this).addClass('active'); 
  $('.our-work-slider').slick('slickGoTo', $(this).index()); 
});

<div class="how-we-work-wrapper"> 
  <div class="page-container"> 
    <div class="how-we-work-header"> 
      <div class="how-we-work-left"> 
        <div class="we-work-title"> 
          Как мы работаем? 
        </div> 
        <div class="we-work-subtitle"> 
          За годы работы мы выработали оптимальный<br> вариант сотрудничества с заказчиком. 
        </div> 
      </div> 
      <div class="how-we-work-right"> 
        <div class="small-btn modal-open order-link"> 
          Узнать подробнее об оплате 
        </div> 
      </div> 
    </div> 
    <div class="we-work-container-dots"> 
      <div class="work-links justify-wrap"> 
        <div class="work-link-item active" aria-controls="slick-slide00"> 
          <a href="javascript:void(0)"> 
	                    Оплата 
	                </a> 
        </div> 
        <div class="work-link-item" aria-controls="slick-slide00"> 
          <a href="javascript:void(0)"> 
	                    Анализ 
	                </a> 
        </div> 
        <div class="work-link-item" aria-controls="slick-slide01"> 
          <a href="javascript:void(0)"> 
	                    Стратегия 
	                </a> 
        </div> 
        <div class="work-link-item" aria-controls="slick-slide02"> 
          <a href="javascript:void(0)"> 
	                    Разработка 
	                </a> 
        </div> 
        <div class="work-link-item" aria-controls="slick-slide03"> 
          <a href="javascript:void(0)"> 
	                    Реклама 
	                </a> 
        </div> 
        <span class="empty-span"></span> 
      </div> 
    </div> 
    <div class="our-work-slider"> 
      <div class="item"> 
        <div class="our-work-row-item"> 
          <div class="our-work-row__left"> 
            <div class="our-work-row__content"> 
              <div class="our-work-content__title"> 
                У нас есть два варианта сотрудничества1 
              </div> 
              <div class="our-work-content__text"> 
                <p> 
                  <span>А —</span> Мы работаем с Вами по классической схеме 30% предоплата до начала работ - 70% пост-оплата после утверждения дизайн-макета. 
                </p> 
                <p> 
                  <span>Б —</span> Вы получаете индивидуальную скидку при полной предоплате. 
                </p> 
              </div> 
            </div> 
          </div> 
          <div class="our-work-row__right"> 
            <img src="images/w-1.jpg" alt=""> 
          </div> 
        </div> 
      </div> 
      <div class="item"> 
        <div class="our-work-row-item"> 
          <div class="our-work-row__left"> 
            <div class="our-work-row__content"> 
              <div class="our-work-content__title"> 
                У нас есть два варианта сотрудничества2 
              </div> 
              <div class="our-work-content__text"> 
                <p> 
                  <span>А —</span> Мы работаем с Вами по классической схеме 30% предоплата до начала работ - 70% пост-оплата после утверждения дизайн-макета. 
                </p> 
                <p> 
                  <span>Б —</span> Вы получаете индивидуальную скидку при полной предоплате. 
                </p> 
              </div> 
            </div> 
          </div> 
          <div class="our-work-row__right"> 
            <img src="images/w-1.jpg" alt=""> 
          </div> 
        </div> 
      </div> 
      <div class="item"> 
        <div class="our-work-row-item"> 
          <div class="our-work-row__left"> 
            <div class="our-work-row__content"> 
              <div class="our-work-content__title"> 
                У нас есть два варианта сотрудничества3 
              </div> 
              <div class="our-work-content__text"> 
                <p> 
                  <span>А —</span> Мы работаем с Вами по классической схеме 30% предоплата до начала работ - 70% пост-оплата после утверждения дизайн-макета. 
                </p> 
                <p> 
                  <span>Б —</span> Вы получаете индивидуальную скидку при полной предоплате. 
                </p> 
              </div> 
            </div> 
          </div> 
          <div class="our-work-row__right"> 
            <img src="images/w-1.jpg" alt=""> 
          </div> 
        </div> 
      </div> 
      <div class="item"> 
        <div class="our-work-row-item"> 
          <div class="our-work-row__left"> 
            <div class="our-work-row__content"> 
              <div class="our-work-content__title"> 
                У нас есть два варианта сотрудничества4 
              </div> 
              <div class="our-work-content__text"> 
                <p> 
                  <span>А —</span> Мы работаем с Вами по классической схеме 30% предоплата до начала работ - 70% пост-оплата после утверждения дизайн-макета. 
                </p> 
                <p> 
                  <span>Б —</span> Вы получаете индивидуальную скидку при полной предоплате. 
                </p> 
              </div> 
            </div> 
          </div> 
          <div class="our-work-row__right"> 
            <img src="images/w-1.jpg" alt=""> 
          </div> 
        </div> 
      </div> 
      <div class="item"> 
        <div class="our-work-row-item"> 
          <div class="our-work-row__left"> 
            <div class="our-work-row__content"> 
              <div class="our-work-content__title"> 
                У нас есть два варианта сотрудничества5 
              </div> 
              <div class="our-work-content__text"> 
                <p> 
                  <span>А —</span> Мы работаем с Вами по классической схеме 30% предоплата до начала работ - 70% пост-оплата после утверждения дизайн-макета. 
                </p> 
                <p> 
                  <span>Б —</span> Вы получаете индивидуальную скидку при полной предоплате. 
                </p> 
              </div> 
            </div> 
          </div> 
          <div class="our-work-row__right"> 
            <img src="images/w-1.jpg" alt=""> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div>