タブ切り替え+スライダー

slide 1
slide 2

slide 1
slide 2
slide 3
slide 4

実案件で実装したものとなります。色々記事を探しながら実装しました。
スライダーが実行されなかった場合は、class名を付与してCSSで整えています。

その後も調べてみたところ、もう少し簡単に実装できそうな情報もあったので、後日再チャレンジしてみたいと思います。

<div class="c-tabs js-tab-scope">
  <div class="c-tabs__tab-list">
      <button type="button" data-trigger-id="tab1" class="c-tabs__tab js-tab-trigger is-current">スライド2枚(スライダーなし)</button>
      <button type="button" data-trigger-id="tab2" class="c-tabs__tab js-tab-trigger">スライド4枚(スライダーあり)</button>
  </div>
  <div class="c-tabs__body">

      <div data-target-id="tab1" class="c-tabs__tab-panel js-tab-target is-current">

          <div class="c-slider-3 splide js-slider">
              <div class="splide__track">
                  <ul class="splide__list c-slider-3__list">
                      <li class="splide__slide">slide 1</li>
                      <li class="splide__slide">slide 2</li>
                  </ul>
              </div>

              <!-- arrows -->
              <div class="splide__arrows"></div>

          </div>
          <!-- [/c-slider-3] -->

      </div>
      <div data-target-id="tab2" class="c-tabs__tab-panel js-tab-target">

          <div class="c-slider-3 splide js-slider">
              <div class="splide__track">
                  <ul class="splide__list c-slider-3__list">
                      <li class="splide__slide">slide 1</li>
                      <li class="splide__slide">slide 2</li>
                      <li class="splide__slide">slide 3</li>
                      <li class="splide__slide">slide 4</li>
                  </ul>
              </div>

              <!-- arrows -->
              <div class="splide__arrows"></div>

          </div>
          <!-- [/c-slider-3] -->

      </div>
  </div>
</div>
<!-- [/c-tabs] -->

.c-tabs__tab-list {
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
}

.c-tabs__tab {
  display: inline-block;
  padding: 0.5em;
  color: inherit;
  touch-action: manipulation;
  cursor: pointer;
}

.c-tabs__tab.is-current {
  background-color: black;
  color: #fff;
}

.c-tabs__tab-panel {
  display: none;
}

.c-tabs__tab-panel.is-current {
  display: block;
}

.c-slider-3.is-visible {
  visibility: visible;
}

.c-slider-3.is-visible .c-slider-3__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 22px;
}

.c-slider-3 .splide__slide {
  aspect-ratio: 16/9;
  display: grid;
  place-content: center;
  background-color: lightgrey;
}

.c-slider-3.is-visible .c-slider-3__arrows {
  display: none;
}

.c-slider-3 .splide__arrow {
  width: 32px;
  height: 32px;
  margin-top: 10px;
}

document.addEventListener('DOMContentLoaded', () => {
    'use strict';

    const triggerSelector = '.js-tab-trigger',
        targetSelector = '.js-tab-target',
        scopeSelector = '.js-tab-scope',
        visibleClass = 'is-visible',
        currentClass = 'is-current';

    const triggers = document.querySelectorAll(triggerSelector);
    const perPage = 2;

    function initializeSplide(sliderSelector) {
        let slideLength = document.querySelectorAll(
            `${sliderSelector} .splide__slide`
        ).length;
        let splide = null;

        if (slideLength > perPage) {
            splide = new Splide(sliderSelector, {
                speed: 1000,
                perPage: perPage,
                perMove: 1,
                gap: 22
            });

            splide.mount();
        } else {
            const targetElement = document.querySelector(sliderSelector);
            if (targetElement) {
                targetElement.classList.add(visibleClass);
            }
        }
    }

    function handleTabClick(trigger) {
        if (!trigger) {
            return;
        }

        const targetId = trigger.dataset.triggerId,
            thisScope = trigger.closest(scopeSelector),
            thisTriggers = thisScope.querySelectorAll(triggerSelector),
            thisTargets = thisScope.querySelectorAll(targetSelector),
            currentTarget = thisScope.querySelector(
                `[data-target-id="${targetId}"]`
            );

        for (const thisTrigger of thisTriggers) {
            thisTrigger.classList.remove(currentClass);
        }
        for (const thisTarget of thisTargets) {
            thisTarget.classList.remove(currentClass);
        }

        trigger.classList.add(currentClass);
        currentTarget.classList.add(currentClass);

        initializeSplide(`[data-target-id="${targetId}"] .js-slider`);
    }

    for (const trigger of triggers) {
        trigger.addEventListener('click', () => {
            handleTabClick(trigger);
        });
    }

    const defaultTabTrigger = triggers[0];
    handleTabClick(defaultTabTrigger);
});