Peek Ahead Slider

Удобный паттерн для каталогов, сторителлинга и product-tour модулей с мягкой навигацией.

React statePreview rail

Готовый сниппет для переноса

У каждой демки есть React-компонент, который можно скопировать и адаптировать под HTML embed или кастомный блок в Tilda. Библиотека собрана Luneka Lab как showroom motion-подходов для клиентских сайтов.

Написать нам Работать с нами

Назад в библиотеку

Загрузка сцены

React component

Peek Ahead Slider

'use client';

import { useState } from 'react';

const slides = ['Atlas', 'Signal', 'Prism', 'Nova'];

export function PeekAheadSlider() {
  const [active, setActive] = useState(0);
  const ordered = slides.map((_, index) => slides[(index + active) % slides.length]);

  return (
    <div>
      <div>{ordered[0]}</div>
      <div>{ordered.slice(1, 3).map((slide, index) => <button key={slide} onClick={() => setActive((active + index + 1) % slides.length)}>{slide}</button>)}</div>
    </div>
  );
}