Слайдер с плавающими заголовками на Javascript

Вопрос. есть слайдер/карусель на jquery. Но есть задача: Доты, при нажатии на которые слайдер крутится, тоже должны быть мини сладером, т.к. являются Заголовками: Занятие 1, Занятие 2 и т.д. до 12. Заголовки на экране помещается 3, а текст самого слайда 1. Как сделать так, чтобы при нажатии на заголовок, он сдвигал весь список заголовков влево к началу Сам слайдер

Я работаю с css контейнера списка, но что-то делаю не так

$('.slick-dots li').click(function(e){
   var sx = e.screenX;
   $('.slick-dots').css({
   'left': -($('.slick-dots').width()-($('.slick-dots').width()-e.screenX))+'px'
   });
});