lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
52 lines • 3.47 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ImageSlider3D;
const jsx_runtime_1 = require("react/jsx-runtime");
const framer_motion_1 = require("framer-motion");
const DEFAULT_DATA = [
"https://images.unsplash.com/photo-1540968221243-29f5d70540bf?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1596135187959-562c650d98bc?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1628944682084-831f35256163?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1590013330451-3946e83e0392?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1590421959604-741d0eec0a2e?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1572613000712-eadc57acbecd?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1570097192570-4b49a6736f9f?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1620789550663-2b10e0080354?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1617775623669-20bff4ffaa5c?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1548600916-dc8492f8e845?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1573824969595-a76d4365a2e6?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1633936929709-59991b5fdd72?w=800&auto=format&fit=crop&q=60",
];
function ImageSlider3D({ images = DEFAULT_DATA, duration = 32, cardWidth = "17.5em", cardAspectRatio = "7/10", perspective = "35em", containerClassName = "", imageClassName = "", rotationDirection = "left", withMask = true, }) {
const n = images.length;
const prefersReducedMotion = (0, framer_motion_1.useReducedMotion)();
const animationDuration = prefersReducedMotion ? duration * 4 : duration;
// rotation angles based on direction
const rotationValues = rotationDirection === "left" ? [0, 360] : [360, 0];
const maskStyles = withMask
? {
WebkitMask: "linear-gradient(90deg, transparent, #000 20% 80%, transparent)",
mask: "linear-gradient(90deg, transparent, #000 20% 80%, transparent)",
}
: {};
return ((0, jsx_runtime_1.jsx)("div", { className: `grid w-full h-full min-h-[500px] overflow-hidden place-items-center ${containerClassName}`, style: {
perspective: perspective,
...maskStyles,
}, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "grid place-self-center pointer-events-auto", style: {
transformStyle: "preserve-3d",
}, animate: {
rotateY: rotationValues,
}, transition: {
duration: animationDuration,
ease: "linear",
repeat: Infinity,
}, children: images.map((src, i) => ((0, jsx_runtime_1.jsx)("img", { src: src, alt: `Slide ${i}`, className: `col-start-1 row-start-1 object-cover rounded-[1.5em] ${imageClassName}`, style: {
width: cardWidth,
aspectRatio: cardAspectRatio,
backfaceVisibility: "hidden",
WebkitBackfaceVisibility: "hidden",
transform: `rotateY(calc(${i} * (1turn / ${n}))) translateZ(calc(-1 * (0.5 * ${cardWidth} + 0.5em) / tan(0.5 * (1turn / ${n}))))`,
} }, i))) }) }));
}
//# sourceMappingURL=3d-image-slider.js.map