Rakentaminen mukautettu sisältö liukusäädintä suosittelu käyttäen JavaScript antaa sinulle täyden hallinnan suunnittelu, käyttäytyminen ja suorituskyky. Toisin kuin valmiiksi rakennetut plugins, käsin koodattu liukusäädin integroituu saumattomasti tahansa CMS, mukaan lukien Directus, ja voidaan räätälöidä vastaamaan brändisi tarkkoja eritelmiä. Tämä artikkeli kävelee kautta luoda tuotanto-valmis testimonial liukusäädintä tyhjästä, kattaa HTML luuranko, CSS siirtymät, JavaScript logiikka, navigointi ohjaimet, reagoivia näkökohtia, saavutettavuus, ja .

HTML-rakenteen suunnittelu

Suosittelut koostuu säiliöstä ja yksittäisistä dioista. Jokaisessa diassa on lainaus, asiakkaan nimi ja valinnainen metatieto, kuten otsikko tai yrityksen logo.

<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>

Jokainen diakääre sisältää [ -elementti semanttisen oikeellisuuden ja paremman saavutettavuuden varmistamiseksi. [-luokka määrittää, mikä dia on tällä hetkellä näkyvissä. Tämä rakenne voidaan koodata kovalla koodauksella tai, parempi, tuottaa dynaamisesti JavaScript-sovelluksella noudetuista tiedoista.

Styling Slider CSS

Puhtaasti, moderni CSS varmistaa liukusäädin näyttää kiillotettu ja toimii hyvin. Käytä säiliössä ja ohjaa liukunäkyvyys opasiteetti ja siirroilla.

.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;
}

Käyttämällä luokan twick on yksinkertainen, mutta ei ole sujuvaa siirtymistä välillä diat. Jotta tuotanto liukusäädin, harkita CSS muuntaa tai absoluuttinen paikannus saavuttaa ristikkäiskuva tai dia animaatioita. Yllä oleva lähestymistapa toimii hyvin mahdollisimman hyvin vähimmäisasetukset.

Core JavaScript Functionality

JavaScript-moottori hallitsee liukupyöräilyä, pistenavigointia ja käyttäjien vuorovaikutusta. Aloita valitsemalla diat ja alustamalla indeksi.

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);

Tämä koodi tarjoaa automaattisen kierto- ja interaktiivisen pisteen navigointi. Parannettu käytettävyys, tauko autoplay kun käyttäjä leijailee liukusäädin tai vuorovaikutuksessa pisteitä.

Lisääminen Edellinen / Seuraavat Näppäimet

Monet käyttäjät odottavat nuolinäppäimiä käsin selata suositteluja. Lisää kaksi painiketta sisällä tai ulkopuolella säiliö.

<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);

Noudetaan suositteluja Directusista

Päättömässä CMS:ssä, kuten Directusissa, käytetään todistusaineistoa (esim. ), jossa on kentät , , [[], ja vaihtoehtoisesti kuvan. Directus JavaScript SDK:n tai tavallisen :n avulla, haetaan ja tehdään tiedot dynaamisesti.

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();
}

Tämä lähestymistapa pitää suosittelut keskitetty Directus ja päivittää liukusäädin automaattisesti aina kun sisältö muuttuu. Parempaa suorituskykyä, harkita välimuisti API vastaus tai käyttämällä Directus SDK kyselyparametreja suodattaa tai lajitella suosittelut.

Esteettömyysnäkökohdat

Osallistava liukusäädin varmistaa, että kaikki käyttäjät voivat olla vuorovaikutuksessa suosittelut.

  • Asetetaan liukusäädinsäiliöön ja (ja varauloskäynti näytönlukijoille).
  • Lisätään ohjauspainikkeisiin (esim. seuraava todistus, ...Edellinen todistus).
  • -menetelmän käyttäminen ei-näkyvillä dioilla.
  • Keskeyttäminen autoplay on keskittyä tai leijuu, ja tarjoaa toisto / tauko-painiketta.
  • Näppäimistön navigointi: nuolinäppäimet liikkuvat liukumäkien välillä, ja välilehti tarkennus hallitaan widget.

Syväsukelluksen osalta ks. WAI Web Accessibility Tutorials on Carousels.

Responsive Design & Touch -tuki

Suosittelut liukusäätimien on toimittava mobiililaitteiden, tablettien ja työpöytäen välillä. Käytä suhteellisia yksiköitä ja mediakyselyitä pehmusteen, kirjasinkoon ja navigointiasetuksen säätämiseen.

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

Kosketustukea varten on toteutettava pyyhkäisemismekanismi käyttäen ja tapahtuma kuuntelijoita. Seuraa deltaa ja laukaisinta tai pyyhkäisemissuuntaan perustuvaa.

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);
 }
 }
}

Suorituskyvyn optimointi

Jotta käyttäjäkokemuksesi olisi sujuva, noudata näitä ohjeita:

  • Laiska-ladata kaikki kuvat (esim. asiakaskuvat) käyttäen .
  • Rajoita DOM manipulointia. Kun uudelleen Slider API tiedot, käytä asiakirjan fragmentti erän insert dioja.
  • Kuristus tai debounce muuttaa kokoa tapahtuma käsittelijät välttää layout thrashing.
  • Minimoi JavaScript-riippuvuus ... liukusäädin ei vaadi jQuery- tai raskaita kirjastoja.
  • Käytetään sileisiin animaatioihin, jos käytetään CSS-siirroksia.

Katso selaimen optimointia yksityiskohtaisesti Google Web Fundamentals -oppaasta renderointi[.

Integrointi rakennukseen

Kun käytät Directus kuin päätön CMS, liukusäädin koodi voi olla osa suurempi etupään projekti rakennettu nippu kuten Webpack, Vite, tai Parcel. Pidä JavaScript ja CSS erillisissä tiedostoissa ja tuoda ne pääsovellukseen. Voit inline koodin heti API-puhelun jälkeen.

Jos käytät Directus JavaScript SDK, tunnistautuminen ja virheiden käsittely yksinkertaistuvat:

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;
}

Tämä lähestymistapa antaa myös tyypin turvallisuuden, jos käytät TypeScript.

Testi

Kehittämisen jälkeen testaat useiden selainten (Chrome, Firefox, Safari, Edge) ja laitteiden läpi. Varmista, että näppäimistön ohjaimet toimivat, että automaattisesti taukoja on leijumassa ja että liukusäädin kaatuu taaksepäin hienovaraisesti, kun JavaScript on pois päältä. Käytä selainta. DevTools simuloi hidas verkkonopeus ja varmista, että testitulokset latautuvat asteittain.

Automatisoitua testausta voidaan lisätä työkaluilla kuten Cypress tai Playwright, jotta vuorovaikutus pysyy luotettavana koodipohjan kehittyessä.

Päätelmät

Rakentamalla mukautetun suositteluliukusäädin JavaScript antaa sinulle vapauden suunnitella ainutlaatuinen, helppokäyttöinen ja performantti komponentti, joka integroituu natiivisti Directus. Yhdistämällä HTML semanttisesti, muotoilu puhtaalla CSS, täytäntöönpano vankka JavaScript, ja noutamalla live-tietoja Directus, luot dynaaminen ominaisuus, joka rakentaa luottamusta yleisösi. Tekniikat kattaa tässä . Piste navigointi, nuolinäppäimillä, kosketustuki, saavutettavuus, ja suorituskyky . muodostaa perustan minkä tahansa sisällön karuselli voit tarvita tulevaisuudessa.