Задать вопрос
@mak-on-do
Начинающий верстальщик
javascript

Как сделать слайдер из табов?

Есть табы, которые при адаптиве, с определенной ширины экрана, нужно сделать слайдером.

Вот сами табы:
605218aa62166802351169.jpeg

А вот так должно быть на мобилке:
605218f972e66570319146.jpeg

Вот структура html:

<div class="tabs-wrapper">

                        <div class="tabs tabs-slider">
                            <a class="tab tab--active" href="#history-tab-1">1983-1992</a>
                            <a class="tab" href="#history-tab-2">2013-2015</a>
                            <a class="tab" href="#history-tab-3">2015</a>
                            <a class="tab" href="#history-tab-4">2018</a>
                            <a class="tab" href="#history-tab-5">2018</a>
                            <a class="tab" href="#history-tab-6">2019</a>
                            <a class="tab" href="#history-tab-7">2020</a>
                        </div>

                        <div class="tabs-container">

                            <div id="history-tab-1" class="tabs-content tabs-content--active">
                                <div class="tabs-content__inner">
                                    <div class="tabs-content__descr">
                                        <h5 class="tabs-content__descr-title">
                                            1983-1992: первый проект завода
                                        </h5>
                                        <div class="tabs-content__descr-text">
                                            <p>
                                                "текст"
                                            </p>
                                            <p>
                                                "текст"
                                            </p>
                                        </div>
                                    </div>
                                    <div class="tabs-content__img">
                                        <img src="images/tabs-content__img.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                            <div id="history-tab-2" class="tabs-content">
                                <div class="tabs-content__inner">
                                    <div class="tabs-content__descr">
                                        <h5 class="tabs-content__descr-title">
                                            2013-2015: . . . . . . . .
                                        </h5>
                                        <div class="tabs-content__descr-text">
                                            <p>
                                                "текст"
                                            </p>
                                            <p>
                                                "текст"
                                            </p>
                                        </div>
                                    </div>
                                    <img class="tabs-content__img" src="images/tabs-content__img.jpg" alt="">
                                </div>
                            </div>
                            <div id="history-tab-3" class="tabs-content">
                                <div class="tabs-content__inner">
                                    <div class="tabs-content__descr">
                                        <h5 class="tabs-content__descr-title">
                                            2015: . . . . . . . .
                                        </h5>
                                        <div class="tabs-content__descr-text">
                                            <p>
                                                "текст"
                                            </p>
                                            <p>
                                                "текст"
                                            </p>
                                        </div>
                                    </div>
                                    <img class="tabs-content__img" src="images/tabs-content__img.jpg" alt="">
                                </div>
                            </div>
                            <div id="history-tab-4" class="tabs-content">
                                <div class="tabs-content__inner">
                                    <div class="tabs-content__descr">
                                        <h5 class="tabs-content__descr-title">
                                            2018: . . . . . . . .
                                        </h5>
                                        <div class="tabs-content__descr-text">
                                            <p>
                                                "текст"
                                            </p>
                                            <p>
                                                "текст"
                                            </p>
                                        </div>
                                    </div>
                                    <img class="tabs-content__img" src="images/tabs-content__img.jpg" alt="">
                                </div>
                            </div>
                            <div id="history-tab-5" class="tabs-content">
                                <div class="tabs-content__inner">
                                    <div class="tabs-content__descr">
                                        <h5 class="tabs-content__descr-title">
                                            2018: . . . . . . . .
                                        </h5>
                                        <div class="tabs-content__descr-text">
                                            <p>
                                               "текст"
                                            </p>
                                            <p>
                                                "текст"
                                            </p>
                                        </div>
                                    </div>
                                    <img class="tabs-content__img" src="images/tabs-content__img.jpg" alt="">
                                </div>
                            </div>
                            <div id="history-tab-6" class="tabs-content">
                                <div class="tabs-content__inner">
                                    <div class="tabs-content__descr">
                                        <h5 class="tabs-content__descr-title">
                                            2019: . . . . . . . .
                                        </h5>
                                        <div class="tabs-content__descr-text">
                                            <p>
                                                "текст"
                                            </p>
                                            <p>
                                               "текст"
                                            </p>
                                        </div>
                                    </div>
                                    <img class="tabs-content__img" src="images/tabs-content__img.jpg" alt="">
                                </div>
                            </div>
                            <div id="history-tab-7" class="tabs-content">
                                <div class="tabs-content__inner">
                                    <div class="tabs-content__descr">
                                        <h5 class="tabs-content__descr-title">
                                            2020: . . . . . . . .
                                        </h5>
                                        <div class="tabs-content__descr-text">
                                            <p>
                                                "текст"
                                            </p>
                                            <p>
                                                "текст"
                                            </p>
                                        </div>
                                    </div>
                                    <img class="tabs-content__img" src="images/tabs-content__img.jpg" alt="">
                                </div>
                            </div>

                        </div>

                    </div>


Вот инициализация табов:

$('.tab').on('click', function(e) {
        e.preventDefault();

        $($(this).siblings()).removeClass('tab--active');
        $($(this).parent().siblings().find('div')).removeClass('tabs-content--active');

        $(this).addClass('tab--active');
        $($(this).attr('href')).addClass('tabs-content--active');
    });


А вот попытка инициализировать слайдер:

$(window).on('load resize', function() {
        if (screen.width <= 990) {
            $('.tabs-slider').slick({
                slidesToShow: 6,
                slidesToScroll: 1,
                arrows: true,
                infinite: true,
                fade: true,
                prevArrow: '<button class="tabs-slider__btn tabs-slider__btn-prev slick-arrow"><svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="..." fill="#23274B"/></svg></button >',
                nextArrow: '<button class="tabs-slider__btn tabs-slider__btn-next slick-arrow"><svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="..." fill="#23274B"/></svg></button>',
            });
        } else {
            $('.tabs-slider').slick('unslick');
        }
    });
  • Вопрос задан
  • 538 просмотров
2 комментария
Подписаться 1 Средний 2 комментария
Пригласить эксперта
Ответы на вопрос 1
@Lord_Dantes
Банально попробуйте сделать 2 кнопки при клике на которые вы определяете текущий активный таб, а далее в зависимости от кнопки активируете следующий по списку таб. Что-то вроде nextSibling
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка Roguelike-игры на Unity для Android
26 дек. 2024, в 01:11
120000 руб./за проект
Доработка веб-платформы на PHP
26 дек. 2024, в 00:27
35000 руб./за проект
Нарисовать обложку для рекламной кампании в VK Ads
25 дек. 2024, в 22:59
1000 руб./в час
Ещё заказы