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

Question

[Антон Федоров]

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

Вот сами табы:


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


Вот структура 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');
        }
    });

Comments

[Антон Федоров]

Вот видео с описанием: https://youtu.be/6ota8ovDJ7o

[dmitry-toster]

залейте работающий код на jsfiddle вместе со стилями, тогда будет проще помочь

Answer 1

[Lord_Dantes]

Банально попробуйте сделать 2 кнопки при клике на которые вы определяете текущий активный таб, а далее в зависимости от кнопки активируете следующий по списку таб. Что-то вроде nextSibling

Comments

[Антон Федоров]

Проблема в том, что я в JS не силен от слова совсем. В принципе, слайдер я сделал, он листает табы, но таб контент не меняется. А при клике на таб, его контент появляется ниже стартового. Табы дальше листаются, но при клике на следующий таб - опять его контент появляется ниже предыдущего. И так пока не появятся все. В общем, вот видео с описанием: https://youtu.be/6ota8ovDJ7o