Прокрутка slick slider после нажатия ссылки с data атрибутом?

Question

[creativeTeams]

Добрый вечер! Подскажите, пожалуйста, как реализовать прокрутку слайдера, после клика по элементу с data-title?

Верстка:

<a class="languages-top-item" data-title="russian" href="#courses"></a>

jQuery:

$('.languages-top-item[href^="#"]').on("click", function (event) {

        $('.courses-list, .courses-tabs__item').removeClass('active');

        $('.courses-list[data-title="' + $(this).data('title') + '"], .courses-tabs__item[data-title="' + $(this).data('title') + '"]').addClass('active');

});

Имеется набор элементов, при клике на которые, по атрибуту data открываются соответствующие этому элементы карточки, но при этом слайдер с названиями этих карточек не скроллится.

Скриншоты:

Comments

[AgentSmith72]

Вам нужно, чтобы вкладки скролились при изменении слайда, и открывался нужный слайд при клике на вкладку?

[creativeTeams]

AgentSmith72, https://quiky-speaky.ru - при клике на язык в 1 экране нас скролит на кладки с курсами, и открывается соответствующий язык с курсами (работает на data атрибуте). Проблема в том, что на мобилках не видно вкладку, на которую мы проскролились.

Частично решил эту проблему методом "slickGoTo", но всё равно не показывает название нужной вкладки:

$('.languages-top-item[href^="#"]').on("click", function (event) {

        let slideIndex = $(this).data('id');

        $('.courses-list, .courses-tabs__item').removeClass('active');

        $('.courses-list[data-title="' + $(this).data('title') + '"], .courses-tabs__item[data-title="' + $(this).data('title') + '"]').addClass('active');

        $( '.courses-tabs' ).slick('slickGoTo', slideIndex);

    });

Answer 1

[AgentSmith72]

1) Вам нужно посчитать длину горизонтального скролла.

scrollMyTabs()                       // Запускайте сразу после slickGoTo в вашем jQuery.

function scrollMyTabs(slideIndex) {
    let difference = calculateDifference();
    let yourTabs;                         // Уникальное имя контейнера с вкладками
    yourTabs.scrollLeft += difference;
}

function calculateDifference() {
    // Возвращайте динамически подсчитанную разницу, на сколько сдвинуть вправо, исходя из того, какая длина вкладок, до вкладки с нужным slideIndex. 
   // Для каждого разрешения значение будет отличаться.
}