<p className={judge && "sample-class01 sample-class02"}>
   hoge  
</p>

<p className={judge ? "sample-class" : ""}>
   hoge  
</p>

<p className={judge ? "sample-class01" : "sample-class02"}>
   hoge
</p>

<p className={`sample-class01 ${judge && "sample-class02"}`}>
   hoge  
</p>

<p className={'sample-class ' + (judge && "sample-class02")}>
   hoge  
</p>

<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

<!-- スライダー全体のサイズを制御するためのラッパー -->
<div class="splide-wrapper">

    <!-- メイン画像用のHTML -->
    <div id="main-carousel" class="splide main-carousel" aria-label="サムネイルスライダー。各サムネイルをクリックすると、メインのスライダーが切り替わります">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide"><img src="画像１のパス" alt=""></li>
                <li class="splide__slide"><img src="画像２のパス" alt=""></li>
                <li class="splide__slide"><img src="画像３のパス" alt=""></li>
                <li class="splide__slide"><img src="画像４のパス" alt=""></li>
            </ul>
        </div>
    </div>

    <!-- 画像リスト用のHTML -->
    <div id="thumbnail-carousel" class="splide" aria-label="サムネイルスライダー。各サムネイルをクリックすると、メインのスライダーが切り替わります">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide"><img src="画像１のパス" alt=""></li>
                <li class="splide__slide"><img src="画像２のパス" alt=""></li>
                <li class="splide__slide"><img src="画像３のパス" alt=""></li>
                <li class="splide__slide"><img src="画像４のパス" alt=""></li>
            </ul>
        </div>
    </div>
</div>

document.addEventListener('DOMContentLoaded', function () {
    // メイン画像のオプション   
    var main = new Splide('#main-carousel', {
        type: 'fade', // スライドアニメをフェード形式にする
        rewind: true, // スライドをループするかどうか
        pagination: false, // ドットインジケーターを非表示
        arrows: false, // 矢印を非表示
    });

    // 画像リストのオプション
    var thumbnails = new Splide('#thumbnail-carousel', {
        rewind: true, // スライドをループするかどうか
        arrows: true, // 矢印を表示
        pagination: false, // ドットインジケーターを非表示
        isNavigation: true, // 画像クリックでスライドを切り替えられるようにする
      　perPage: 3,  // 画像リストに表示する枚数
        gap: "3%" // 画像リストの余白
    });

    // メイン画像と画像リストを連動させる記述   
    main.sync(thumbnails);
    main.mount();
    thumbnails.mount();
});

<!-- Splide用js読み込み -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

<!--  自分で用意したjsファイル  -->
<script src="js/slide.js"></script>

/* スライダー全体を囲うラッパー要素 */
.splide-wrapper {
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
}

.main-carousel {
    /* メイン画像と画像リストの間の余白 */
    margin-bottom: 30px;
}

.main-carousel .splide__track {
    /* メイン画像の比率 */
    aspect-ratio: 1 / 1;
}

#thumbnail-carousel .splide__slide {
    /* 画像リストの画像の比率 */
    aspect-ratio: 1 / 1;
}

.splide__slide {
    /* 非表示中の画像は薄くする */
    opacity: 0.6;
}

.splide__slide.is-active {
    opacity: 1;
}

/* 画像が指定のサイズ内に収まるようにするためのCSS */
.splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
  /* 表示中の画像のボーダーを除きたいときは下記を有効化する */
  /* border: none !important; */
}