Javascriptを使って、テストのためのカスタムコンテンツスライダーを作成

JavaScript を使用して、テスト用のカスタムコンテンツスライダを作成すると、設計、動作、およびパフォーマンスを完全に制御できます。事前ビルドプラグインとは異なり、ハンドコードされたスライダは、Directus を含むあらゆる CMS とシームレスに統合し、ブランドの正確な仕様に合わせて調整できます。この記事では、制作 - 準備が簡単なテストスライダをゼロから作成し、HTML skeleton、CSS トランジション、JavaScript ロジック、ナビゲーションコントロール、応答性を直接テストする方法を RESTimonial API からテストする方法を直接テストする方法を検証します。

HTML構造のプランニング

定例スライダはコンテナと個々のスライドで構成されます。各スライドは引用符、クライアントの名前、タイトルや会社のロゴなどのオプションのメタデータを保持しています。

<div id="testimonial-slider" class="slider">
 <div class="slide active">
 <blockquote>
 <p>“Great service that delivered exactly what we needed.”</p>
 <footer>— Jane Doe, CEO of Example Inc.</footer>
 </blockquote>
 </div>
 <div class="slide">
 <blockquote>
 <p>“Their team was responsive and professional from start to finish.”</p>
 <footer>— John Smith, Founder of Acme Corp.</footer>
 </blockquote>
 </div>
 <div class="slide">
 <blockquote>
 <p>“We saw a measurable improvement in user engagement after the redesign.”</p>
 <footer>— Emily Chen, CTO of WebTech</footer>
 </blockquote>
 </div>
</div>

各スライドは、セマンティックな矯正とより良いアクセシビリティの[要素をラップします。 ]クラスは、現在どのスライドが見えるかを決定します。この構造は、JavaScript経由で取得されたデータから動的に生成される、ハードコーディングまたは、より良くなることができます。

スライダーをCSSで固定する

清潔でモダンなCSSは、スライダーが磨かれてうまく機能することを確認します。コンテナの[を使用して、逆の視認性を制御し、不透明度と移行をコントロールします。

.slider {
 position: relative;
 width: 100%;
 max-width: 800px;
 margin: 0 auto;
 overflow: hidden;
 border-radius: 12px;
 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.slide {
 display: none;
 padding: 2rem;
 background: #f9f9f9;
 transition: opacity 0.5s ease-in-out;
}

.slide.active {
 display: block;
}

blockquote {
 margin: 0;
 padding: 0;
 font-style: italic;
 line-height: 1.6;
}

blockquote footer {
 margin-top: 0.75rem;
 font-style: normal;
 font-weight: 600;
 color: #333;
}

.slider-nav {
 display: flex;
 justify-content: center;
 gap: 0.5rem;
 margin-top: 1rem;
}

.slider-nav button {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 border: 2px solid #007acc;
 background: transparent;
 cursor: pointer;
 transition: background 0.3s;
}

.slider-nav button.active-dot {
 background: #007acc;
}

クラストグルで[を使うと、単純ですが、スライド間のスムーズな移行が欠如します。生産スライダでは、CSSの変換や、クロスフェードやスライドアニメーションを達成するために絶対的な位置決めを使用して検討します。上記のアプローチは最小限の設定にうまく機能します。

コア JavaScript 機能

JavaScriptエンジンは、スライドのサイクリング、ドットナビゲーション、ユーザーインタラクションを管理します。スライドを選択し、インデックスを初期化します。

const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.slider-nav button');
let currentIndex = 0;
let intervalId;

function showSlide(index) {
 slides.forEach((slide, i) => {
 slide.classList.toggle('active', i === index);
 });
 dots.forEach((dot, i) => {
 dot.classList.toggle('active-dot', i === index);
 });
 currentIndex = index;
}

function nextSlide() {
 const next = (currentIndex + 1) % slides.length;
 showSlide(next);
}

function startAutoPlay(interval = 5000) {
 intervalId = setInterval(nextSlide, interval);
}

function stopAutoPlay() {
 clearInterval(intervalId);
}

// Dot click handler
dots.forEach((dot, index) => {
 dot.addEventListener('click', () => {
 stopAutoPlay();
 showSlide(index);
 startAutoPlay(4000); // restart with shorter delay after manual interaction
 });
});

// Initialize
showSlide(0);
startAutoPlay(5000);

このコードは自動回転とインタラクティブなドットナビゲーションを提供します。ユーザがスライダを上回るときに、ユーザが自動再生を一時停止したり、ドットとやり取りしたりします。

前の追加 / 次のボタン

多くのユーザーは、矢印制御を手動で参照するように期待しています。コンテナ内の2つのボタンを追加します。

<button class="prev" aria-label="Previous testimonial">❮</button>
<button class="next" aria-label="Next testimonial">❯</button>

.prev, .next {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background: rgba(0,0,0,0.5);
 color: white;
 border: none;
 padding: 0.75rem;
 cursor: pointer;
 z-index: 10;
}

.prev { left: 0; border-radius: 0 4px 4px 0; }
.next { right: 0; border-radius: 4px 0 0 4px; }

document.querySelector('.prev').addEventListener('click', () => {
 const prev = (currentIndex - 1 + slides.length) % slides.length;
 showSlide(prev);
});

document.querySelector('.next').addEventListener('click', nextSlide);

ダイレクトスからのテストイモーニアルをフェッチ

ダイレクトスのようなヘッドレスCMSでは、テストイモニアルデータは、、]、[]]、およびオプションで画像のフィールドで保存されます。ダイレクトス JavaScript SDKまたは]]を使用して、データを動的に取得およびレンダリングします。

async function fetchTestimonials() {
 try {
 const response = await fetch('https://your-project.directus.app/items/Testimonials');
 if (!response.ok) throw new Error('Network response was not ok');
 const data = await response.json();
 return data.data;
 } catch (error) {
 console.error('Failed to fetch testimonials:', error);
 return [];
 }
}

async function renderSlider() {
 const testimonials = await fetchTestimonials();
 const sliderContainer = document.getElementById('testimonial-slider');
 const navContainer = document.querySelector('.slider-nav');

 // Clear existing content
 sliderContainer.innerHTML = '';
 navContainer.innerHTML = '';

 testimonials.forEach((item, index) => {
 const slide = document.createElement('div');
 slide.className = `slide${index === 0 ? ' active' : ''}`;
 slide.innerHTML = `
 <blockquote>
 <p>“${item.quote}”</p>
 <footer>— ${item.client_name}${item.client_title ? `, ${item.client_title}` : ''}</footer>
 </blockquote>
 `;
 sliderContainer.appendChild(slide);

 const dot = document.createElement('button');
 dot.className = index === 0 ? 'active-dot' : '';
 dot.setAttribute('aria-label', `Go to testimonial ${index + 1}`);
 dot.addEventListener('click', () => {
 stopAutoPlay();
 showSlide(index);
 startAutoPlay(4000);
 });
 navContainer.appendChild(dot);
 });

 // Re‑initialize variables and start
 slides = document.querySelectorAll('.slide');
 dots = document.querySelectorAll('.slider-nav button');
 showSlide(0);
 startAutoPlay();
}

このアプローチは、ダイレクトスで一元化したテストを保ち、コンテンツの変更時に自動的にスライダーを更新します。より良いパフォーマンスのために、APIレスポンスのキャッシュや、Directus SDKを使用して、クエリパラメータを使用してテストのフィルタリングやソートを行います。

アクセシビリティの検討

包括的なスライダは、すべてのユーザーがあなたの証言と対話することができます。主なプラクティスは次のとおりです。

スライダーコンテナとの[]の設定(スクリーンリーダーのフォールバック付き)。
ボタンをコントロールする[を追加(例:「次期」、前期の証言」)。
見えないスライドの[]を使用します。
フォーカスやホバーにオートプレイをパウズし、再生/一時ボタンを付与します。
キーボードナビゲーションの有効化: 矢印キーはスライド間で移動し、タブフォーカスはウィジェット内で管理されます。

ディープ・ダイブについては、 ] を参照して、Carousels[ の WAI Webアクセシビリティ・チュートリアルを参照してください。

レスポンシブデザイン&タッチサポート

台数のスライダーは、モバイルデバイス、タブレット、デスクトップを横断して動作しなければなりません。パッド、フォントサイズ、ナビゲーションレイアウトを調整するために、相対的なユニットとメディアのクエリを使用します。

@media (max-width: 600px) {
 .slide {
 padding: 1.25rem;
 }
 blockquote {
 font-size: 0.95rem;
 }
 .slider-nav button {
 width: 10px;
 height: 10px;
 }
}

タッチサポートでは、とを使ってスワイプ機構を実行します。デルタを追跡し、スワイプ方向に基づいて]または[をトリガーします。

let touchStartX = 0;
let touchEndX = 0;

sliderContainer.addEventListener('touchstart', (e) => {
 touchStartX = e.changedTouches[0].screenX;
});

sliderContainer.addEventListener('touchend', (e) => {
 touchEndX = e.changedTouches[0].screenX;
 handleSwipe();
});

function handleSwipe() {
 const diff = touchStartX - touchEndX;
 if (Math.abs(diff) > 50) {
 if (diff > 0) nextSlide();
 else {
 const prev = (currentIndex - 1 + slides.length) % slides.length;
 showSlide(prev);
 }
 }
}

パフォーマンスの最適化

スムーズなユーザーエクスペリエンスを確保するため、以下のガイドラインに従ってください。

を使用して任意の画像(例、クライアントのヘッドショット)をレイジーロードします。
DOM の操作回数を制限します。 API のデータからスライダを再構築する場合は、ドキュメントフラグメントを使用してバッチインサートスライドをスライドさせます。
レイアウトのスラッシュを避けるためにイベントハンドラをスロットルまたはデバウンスします。
JavaScript の依存関係を最小化します。スライダーは jQuery や重なるライブラリを必要としません。
CSSトランジションを使用する場合は、[]] を円滑にアニメーションに使う。

ブラウザのレンダリング最適化を詳しく見るには、[]]を参照してください。レンダリングに関するGoogle Web基本ガイド。

ビルドプロセスと統合

Directus をヘッドレス CMS として使用する場合、スライダーコードは Webpack、Vite、または Parcel のようなバンドラーで構築されたより大きなフロントエンドプロジェクトの一部であるかもしれません。 JavaScript と CSS を別々のファイルに保存し、メインアプリケーションにインポートします。静的なサイトや WordPress のテーマでは、API 呼び出し直後にコードをインライン化できます。

Directus JavaScript SDK[] を使用している場合は、認証とエラー処理がより簡単です。

import { createDirectus, rest, readItems } from '@directus/sdk';

const client = createDirectus('https://your-project.directus.app').with(rest());

async function getTestimonials() {
 const testimonials = await client.request(readItems('Testimonials', {
 sort: ['sort'],
 limit: 10
 }));
 return testimonials;
}

このアプローチは、TypeScript を使用した場合、安全タイプにもなります。

スライダーのテスト

開発後、複数のブラウザ(Chrome、Firefox、Safari、Edge)とデバイスを横断テストします。キーボードが動作することを確認してください。この操作はホバーに一時停止し、JavaScriptが無効にしたときにスライダが上品に落ちることを確認してください。ブラウザのDevToolsを使用して、遅いネットワーク速度をシミュレートし、そのテストイモーニアルが進行状況をロードすることを確認します。

サイプレスやプレイライトなどのツールで、コードベースが進化するにつれて、インタラクションが信頼性を維持できるように自動テストを追加できます。

コンテンツ

JavaScript でカスタムの testimonial スライダーを作成すると、独自でアクセス可能で実行可能なコンポーネントを設計する自由が提供されます。直接的に連携する HTML を構造化することで、きれいな CSS でスタイリングし、堅牢な JavaScript を実行し、Directus からライブデータを取得することで、視聴者と信頼を築き上げるダイナミックな機能を作成します。ここでカバーされた技術は、ここにカバーされています。ドットナビゲーション、矢印制御、タッチサポート、アクセシビリティ、パフォーマンス - 将来のカーニーズに必要なあらゆるコンテンツの基礎を形成します。