プロフィールをスライダー化したい

Question

実現したいこと

イメージとしては以下のサイトにある
https://wp-emanon.jp/emanon-premium/demo02/
お客様の声スライダーのようなものになります。
これをプロフィールスライダーとして使います。
各人物のアイコンや簡単なプロフィールの部分からそれぞれの詳細ページへリンクします。
これをhtml、css、jsで作りたいです。
人物は9人分です。
インジケーターは〇でスライドの下に9つ作ります。
インジケーターによる左右どちらにも行ける手動操作と、オートプレイによる左から右へ流れるスライドを両立させます。
スライドは画面の中途半端な位置に止まらないようにしたいです。

発生している問題・分からないこと

スライダーは3人分ずつスライドするようになっていますが、それだと動作が早すぎるので1人分ずつスライドするように修正したいです。
但し、画面の見た目は、一度に3人分表示で変更しません。
つまり、1/3づつスライドさせる構造にします。

該当のソースコード

   <div class="testimonial-slider">
        <div class="testimonial-track">
            <div class="testimonial">
                <img src="path-to-image1.jpg" alt="Customer 1" class="testimonial-img">
                <p class="testimonial-comment">"Customer 1's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image2.jpg" alt="Customer 2" class="testimonial-img">
                <p class="testimonial-comment">"Customer 2's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image3.jpg" alt="Customer 3" class="testimonial-img">
                <p class="testimonial-comment">"Customer 3's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image4.jpg" alt="Customer 4" class="testimonial-img">
                <p class="testimonial-comment">"Customer 4's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image5.jpg" alt="Customer 5" class="testimonial-img">
                <p class="testimonial-comment">"Customer 5's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image6.jpg" alt="Customer 6" class="testimonial-img">
                <p class="testimonial-comment">"Customer 6's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image7.jpg" alt="Customer 7" class="testimonial-img">
                <p class="testimonial-comment">"Customer 7's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image8.jpg" alt="Customer 8" class="testimonial-img">
                <p class="testimonial-comment">"Customer 8's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image9.jpg" alt="Customer 9" class="testimonial-img">
                <p class="testimonial-comment">"Customer 9's comment..."</p>
            </div>
        </div>
        <div class="testimonial-indicators">
            <!-- 9つのインジケーターを追加 -->
            <span class="indicator" onclick="goToSlide(0)"></span>
            <span class="indicator" onclick="goToSlide(1)"></span>
            <span class="indicator" onclick="goToSlide(2)"></span>
            <span class="indicator" onclick="goToSlide(3)"></span>
            <span class="indicator" onclick="goToSlide(4)"></span>
            <span class="indicator" onclick="goToSlide(5)"></span>
            <span class="indicator" onclick="goToSlide(6)"></span>
            <span class="indicator" onclick="goToSlide(7)"></span>
            <span class="indicator" onclick="goToSlide(8)"></span>
        </div>
    </div>

        .testimonial-slider {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .testimonial-track {
            display: flex;
            transition: transform 0.5s ease;
        }

        .testimonial {
            flex: 0 0 33.3%;
            text-align: center;
        }

        .testimonial-img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-bottom: 10px;
        }

        .testimonial-comment {
            font-size: 1rem;
            color: #333;
            max-width: 200px;
            margin: 0 auto;
        }

        .testimonial-indicators {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }

        .indicator {
            width: 12px;
            height: 12px;
            margin: 0 5px;
            background-color: #ccc;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .indicator.active {
            background-color: #333;
        }

let currentIndex = 0;
const maxIndex = 2;  // インジケータ数に合わせた最大インデックス

// オートプレイ機能でスライドを移動
function showNextTestimonial() {
    const track = document.querySelector('.testimonial-track');
    
    // 現在のインデックスがmaxIndexを超えたら0に戻す
    currentIndex = (currentIndex + 1) % (maxIndex + 1);
    track.style.transform = `translateX(-${100 * currentIndex}%)`;

    // インジケータを更新
    updateIndicators();
}

// インジケータのクリックで指定のスライドに移動
function goToSlide(index) {
    const track = document.querySelector('.testimonial-track');

    // インデックスが範囲内か確認
    if (index >= 0 && index <= maxIndex) {
        currentIndex = index;
        track.style.transform = `translateX(-${100 * currentIndex}%)`;
        updateIndicators();
    }
}

// インジケータの更新処理
function updateIndicators() {
    const indicators = document.querySelectorAll('.indicator');
    indicators.forEach((indicator, index) => {
        indicator.classList.toggle('active', index === currentIndex);
    });
}

// 初期設定：最初のインジケータをアクティブに設定
updateIndicators();

// オートプレイ機能：5秒ごとに次のスライドを表示
setInterval(showNextTestimonial, 5000);

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

今の段階では3人分づつスライド。インジケーターは9人分表示。インジケータは3までしか動作していません。これを9まで動作するように直したいです。オートプレイと連動させます。

補足

特になし

Comments

[juner]

playground 化するならこんな感じでしょうか……？
https://livecodes.io/?x=id/eq3nh99wu8x

Answer 1

js で手書きしていた transform を css に持ってきて 移動幅を 100% から 100% の 1/3 づつにします。（これは js でやってもいいですが、操作を単純にしたいのでやります。
（別途移動量を 定義してそれを使ってもいいかもしれません

.testimonial-track {
  --currentIndex: 0;
  transform: translateX(calc(( -100% / 3) * var(--currentIndex)))
}

あとは

• インジゲーターの数を取得して -1 を maxIndex として処理する
• --currentIndex を更新する

だけではないでしょうか？

let currentIndex = 0;
/** インジケータ数に合わせた最大インデックス */
const maxIndex =
  document.querySelectorAll(".testimonial-indicators .indicator").length - 1;
// オートプレイ機能でスライドを移動
function showNextTestimonial() {
  const track = document.querySelector(".testimonial-track");

  // 現在のインデックスがmaxIndexを超えたら0に戻す
  currentIndex = (currentIndex + 1) % (maxIndex + 1);
  track.style.setProperty("--currentIndex", currentIndex);

  // インジケータを更新
  updateIndicators();
}

// インジケータのクリックで指定のスライドに移動
function goToSlide(index) {
  const track = document.querySelector(".testimonial-track");

  // インデックスが範囲内か確認
  if (index >= 0 && index <= maxIndex) {
    currentIndex = index;
    track.style.setProperty("--currentIndex", currentIndex);
    updateIndicators();
  }
}

// インジケータの更新処理
function updateIndicators() {
  const indicators = document.querySelectorAll(".indicator");
  indicators.forEach((indicator, index) => {
    indicator.classList.toggle("active", index === currentIndex);
  });
}

// 初期設定：最初のインジケータをアクティブに設定
updateIndicators();

// オートプレイ機能：5秒ごとに次のスライドを表示
setInterval(showNextTestimonial, 5000);

以上。

参考

• 上記の対応を行った playground
• CSSStyleDeclaration.setProperty() - Web API | MDN
• カスタムプロパティ (--*): CSS 変数 - CSS: カスケーディングスタイルシート | MDN
• calc() - CSS: カスケーディングスタイルシート | MDN

Comments

[naaS]

自分のPCだと動作しないので、Windows8.1だと無理なのでしょうか？

[juner]

ブラウザのバージョンを教えてください。 Edge？Chrome？ …… もしかして IE？
低いブラウザのバージョンを対象とするのであれば質問文に対象ブラウザまで入れていただかないと厳しいところがあります。

カスタムプロパティ ❌IE ⭕ Edge 16～ Chrome 49～ 主なブラウザで使えるようになった時期:2017年
https://caniuse.com/css-variables

calc() ▲IE9～ ⭕Edge 12～ Chrome 26～ 主なブラウザで使えるようになった時期:2013年
https://caniuse.com/calc

[juner]

いや、そもそも livecodes.io は IE非対応だわ。

[naaS]

グーグルクロムを使っています。
以下コピペ
今後、Google Chrome のアップデートを受信するには、Windows 10 以降が必要となります。このパソコンでは Windows 8.1 が実行されています。 詳細
バージョン: 109.0.5414.168（Official Build） （64 ビット）

[juner]

Chrome 109 なら動きそうなものですが……（css nesting の一部が動かないだけで 特に css の custom property や スライドが止まるような要因にはならない気がしますが。
どの様に「動作しない」とされていますでしょうか？
ページが開けない、ページが正常に表示されない、スクリプトが動作しない　等等……

[naaS]

livecodes.io　playground模範コード
最初はプロフィールが3人分表示されますが、
すぐに消え画面が白くなります。
インジケータは押しても機能しません。
playgroundのようなこちらが求めている動作はしません。
グーグルの検証画面でも、エラーメッセージはありません。

[juner]

livecodes.io で再現を作っていただくか、 codepen.io で再現するものを作っていただいた方が良い感じでしょうか……？（その挙動は想定外です

[naaS]

juner氏のコードをヒントにコードを書き直してみたのです。
css
:root {
--currentIndex: 0;
}

body {
font-family: Arial, sans-serif;
}

.testimonial-slider {
position: relative;
width: 100%;
max-width: 1400px;
margin: 0 auto;
overflow: hidden;
}

.testimonial-track {
display: flex;
transition: transform 0.5s ease;
transform: translateX(calc(-33.33% * var(--currentIndex)));
}

.testimonial {
flex: 0 0 33.33%;
text-align: center;
/*padding: 10px;*/
}

.testimonial-img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 10px;
}

.testimonial-comment {
font-size: 1rem;
color: #333;
max-width: 200px;
margin: 0 auto;
}

.testimonial-indicators {
display: flex;
justify-content: center;
margin-top: 15px;
}

.indicator {
width: 12px;
height: 12px;
margin: 0 5px;
background-color: #ccc;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s;
}

.indicator.active {
background-color: #333;
}

@media screen and (max-width: 480px) {

.testimonial-track {
display: flex;
transition: transform 0.5s ease;
transform: translateX(calc(-100% * var(--currentIndex)));
}

.testimonial {
flex: 0 0 100%;
text-align: center;
/*padding: 10px;*/
}

}

[naaS]

jsの書き直し

<script>
let currentIndex = 0;
const maxIndex = 9;

// 次のスライドを表示
function showNextTestimonial() {
currentIndex = (currentIndex + 1) % maxIndex;
updateSlider();
}

// 特定のスライドに移動
function goToSlide(index) {
currentIndex = index;
updateSlider();
}

// スライダーの更新
function updateSlider() {
document.documentElement.style.setProperty("--currentIndex", currentIndex);
updateIndicators();
}

// インジケータの更新
function updateIndicators() {
const indicators = document.querySelectorAll(".indicator");
indicators.forEach((indicator, index) => {
indicator.classList.toggle("active", index === currentIndex);
});
}

// 初期化
updateSlider();
setInterval(showNextTestimonial, 5000); // 5秒ごとにスライド
</script>
最初の投稿と違いカラーにならないので、我ながら投稿方法を間違えているような気がする。
修正方法が分からない…
スライダーの動作は成功。
juner氏のコードが参考になったので厚くお礼を申し上げます。

[naaS]

junerさん回答ありがとうございます。
回答は非常に参考になりました。