Как сверстать такой элемент?

Question

[Exci84]

Подскажите как сверстать такой блок?
Я пробовал табами, но не могу прикрутить стрелки, чтобы выбирали предыдущий и следующий блок.
А если slick слайдером, то я не понимаю как задать точкам надписи.
В JS я не умею совсем, мозгов хватает пока только копипастить и подставлять классы.
Возможно есть какой-то слайдер который умеет это в отличии от slick'a или есть альтернативные варианты?
Или кто то делал что то похожее? Не ругайтесь если глупый вопрос, я только учусь

Answer 1

[WebEagle]

Оставь Slick, в настройках вообще удали кнопки.
Поверх сверстай меню на элемент меню используй click
у slick есть метод slickGoTo

Comments

[Exci84]

$('.класс в котором лежит итемt').on('click', '.класс итема', function () {
$('.класс слайдера').slick('slickGoTo', 3);
});
Вроде работает, спасибо
А не подскажешь, как можно это оптимизировать? что бы не писать 6 раз подряд

[WebEagle]

Exci84, вот это вот:

$('.класс в котором лежит итемt').on('click', '.класс итема', function () {

лучше замени на нативное в html

<div onclick="$('.класс слайдера').slick('slickGoTo', 0);">ссылка на 1 слайд</div>
<div onclick="$('.класс слайдера').slick('slickGoTo', 1);">ссылка на 1 слайд</div>
<div onclick="$('.класс слайдера').slick('slickGoTo', 2);">ссылка на 1 слайд</div>
<div onclick="$('.класс слайдера').slick('slickGoTo', 3);">ссылка на 1 слайд</div>

не лучший вариант, но так хотябы через год будет проще найти что за чем следует, а то элемент в одном месте, подписываешься на событие в другом месте, слайдер в третьем))

[Exci84]

WebEagle, всё получилось, а как сделать так, чтобы при переключении стрелками, класс активности переходил к другому элементу? Чтобы при нажатии .slick-next, активным становилась следущая ссылка в меню?

[WebEagle]

Exci84, https://bezramok-tlt.ru/blog/posts/slick-slider-us...
посмотри события которые происходят, внизу страницы. За события переходов можно зацепиться

[Exci84]

WebEagle, Я вижу как у слайдера меняются классы активности, проблема в том, что я совершенно не умею в js , я пока только научился худо-бедно верстать и подключать готовые библиотеки, вот сверстаю макетов 5 и начну изучать js. Ну да ладно, и на этом спасибо, пока пропущу этот момент