слайдеры

Драг-слайдер

Слайдер-лента, который ощущается тактильно и одинаково хорошо работает мышью и пальцем.

GSAP DraggablePointer UX

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

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

Prompt для GPT

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

Создай современную веб-анимацию «Драг-слайдер» для Next.js и React. Нужен эффект: горизонтальная галерея в духе apple с прямым перетаскиванием. Используй GSAP Draggable, Pointer UX, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

React-компонент

Драг-слайдер

'use client';

import gsap from 'gsap';
import { Draggable } from 'gsap/Draggable';
import { useEffect, useRef } from 'react';

gsap.registerPlugin(Draggable);

export function DragSlider() {
  const frameRef = useRef<HTMLDivElement>(null);
  const trackRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!frameRef.current || !trackRef.current) return;

    const maxX = Math.min(0, frameRef.current.offsetWidth - trackRef.current.scrollWidth);
    const draggable = Draggable.create(trackRef.current, {
      type: 'x',
      bounds: { minX: maxX, maxX: 0 },
      inertia: false,
    })[0];

    return () => draggable.kill();
  }, []);

  return (
    <div ref={frameRef} className="overflow-hidden rounded-[28px] border border-white/10">
      <div ref={trackRef} className="flex gap-4 p-4">
        <div className="h-64 w-72 shrink-0 rounded-[20px] bg-neutral-900" />
        <div className="h-64 w-72 shrink-0 rounded-[20px] bg-neutral-900" />
        <div className="h-64 w-72 shrink-0 rounded-[20px] bg-neutral-900" />
      </div>
    </div>
  );
}