слайдеры

Плавный фейд-слайдер

Мягкий fade-слайдер для постеров, портретов и продуктовых кадров, который легко встраивается в промо-блоки.

Framer MotionReact state

Подробнее и перенос

Здесь собраны живое демо, prompt для генерации похожего решения и готовый React-сниппет для переноса в HTML embed или кастомный блок Tilda.

Prompt для GPT

Готовая формулировка для генерации похожего эффекта

Создай современную веб-анимацию «Плавный фейд-слайдер» для Next.js и React. Нужен эффект: классическая галерея с мягким crossfade, кнопками и точечной пагинацией. Используй Framer Motion, React state, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

React-компонент

Плавный фейд-слайдер

'use client';

import { AnimatePresence, motion } from 'framer-motion';
import { useState } from 'react';

const slides = ['Aurora', 'Monolith', 'Glass', 'Signal'];

export function FadeSlider() {
  const [index, setIndex] = useState(0);

  return (
    <div className="relative overflow-hidden rounded-[28px] border border-white/10 bg-black p-4">
      <AnimatePresence mode="wait">
        <motion.div
          key={index}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="aspect-[16/10] rounded-[20px] bg-neutral-900"
        >
          {slides[index]}
        </motion.div>
      </AnimatePresence>
      <div className="mt-4 flex gap-2">
        <button onClick={() => setIndex((index - 1 + slides.length) % slides.length)}>Назад</button>
        <button onClick={() => setIndex((index + 1) % slides.length)}>Вперёд</button>
      </div>
    </div>
  );
}