javascript 尝试在滑块内循环显示三张牌

klr1opcd 于 5个月前发布在 Java

关注(0)|答案(1)|浏览(62)

我试图创建一个滑块组件，我想在Inner Slider中实现一个序列，如[img 1，img 2，img 3]，然后是[img 2，img 3，img 1]，然后是[img 3，img 1，img 2]。然而，它当前的行为不是这个序列，而是像[img 1，img 2，img 3]，然后是[img 2，img 3]，最后只是[img 3]。当当前状态回到0时，它又从[img1，img2，img3]开始。我如何才能实现所需的序列？我希望你能理解。

import React, { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
const image = [
   { banner: "https://image.tmdb.org/t/p/original/sRLC052ieEzkQs9dEtPMfFxYkej.jpg",
     poster: "https://image.tmdb.org/t/p/original/ui4DrH1cKk2vkHshcUcGt2lKxCm.jpg"
    },
    { banner: "https://image.tmdb.org/t/p/original/4HodYYKEIsGOdinkGi2Ucz6X9i0.jpg",
    poster: "https://image.tmdb.org/t/p/original/ui4DrH1cKk2vkHshcUcGt2lKxCm.jpg"
   },
   { banner: "https://image.tmdb.org/t/p/original/1jITxVJhkiFJuQuj8NcPLmDNtJg.jpg",
    poster: "https://image.tmdb.org/t/p/original/qjhahNLSZ705B5JP92YMEYPocPz.jpg"
   }
];

export default function Carousel() {
  const [current, setCurrent] = useState(0);
  

  const nextImage = function () {
    setCurrent((current + 1) % image.length);
  };

  useEffect(() => {
    setTimeout(() => {
      nextImage();
    }, 2000);
  });

  const variants = {
    initial: {
      x: 1000,
      opacity: 0,
    },
    animate: {
      x: 0,
      opacity: 1,
      transition: {
        x: { type: "spring", stiffness: 300, damping: 30 },
        opacity: { duration: 0.2 },
      },
    },
    exit: {
      x: -1000,
      opacity: 0,
      transition: {
        x: { type: "spring", stiffness: 300, damping: 30 },
        opacity: { duration: 0.2 },
      },
    },
  };

  return (
    <div className="w-full h-[550px] overflow-hidden relative">
      <AnimatePresence initial={false} >
        <motion.img
          variants={variants}
          animate="animate"
          initial="initial"
          exit="exit"
          alt="slides"
          key={image[current]?.banner}
          className="slides z-20"
          src={image[current]?.banner}
        />

<div className="absolute w-[40%] h-auto overflow-hidden justify-center  top-1/2 translate-y-[-50%] gap-4 m-auto flex right-8 z-40" >
          {
            {/* Inner Slider */}
            image?.map((items,index)=>{
                return <motion.img src={items?.poster} key={index} className="w-[30%] object-cover" alt="" animate={{ x: `calc(-${current * 100}% - ${current}rem)` }}
                />
            })
          }
      </div>
        
      </AnimatePresence>
       
    </div>
  );
}

字符串

JavaScript

来源：https://stackoverflow.com/questions/77746718/try-displaying-three-cards-in-a-loop-within-a-slider

1条答案

按热度按时间

kuarbcqp1#

您可以在“真实的”图像的右侧放置一组图像克隆，这些图像克隆随着“真实的”图像向左移动而移动。这使得它看起来像一个循环。在循环结束时，位置会无缝重置。

const { useEffect, useState } = React;
const { motion, AnimatePresence } = Motion;
const image = [
  {
    banner:
      'https://image.tmdb.org/t/p/original/sRLC052ieEzkQs9dEtPMfFxYkej.jpg',
    poster:
      'https://image.tmdb.org/t/p/original/ui4DrH1cKk2vkHshcUcGt2lKxCm.jpg',
  },
  {
    banner:
      'https://image.tmdb.org/t/p/original/4HodYYKEIsGOdinkGi2Ucz6X9i0.jpg',
    poster:
      'https://image.tmdb.org/t/p/original/ui4DrH1cKk2vkHshcUcGt2lKxCm.jpg',
  },
  {
    banner:
      'https://image.tmdb.org/t/p/original/1jITxVJhkiFJuQuj8NcPLmDNtJg.jpg',
    poster:
      'https://image.tmdb.org/t/p/original/qjhahNLSZ705B5JP92YMEYPocPz.jpg',
  },
];

function Carousel() {
  const [current, setCurrent] = useState(0);

  const nextImage = function () {
    setCurrent((current + 1) % image.length);
  };

  useEffect(() => {
    setTimeout(() => {
      nextImage();
    }, 2000);
  });

  const variants = {
    initial: {
      x: 1000,
      opacity: 0,
    },
    animate: {
      x: 0,
      opacity: 1,
      transition: {
        x: { type: 'spring', stiffness: 300, damping: 30 },
        opacity: { duration: 0.2 },
      },
    },
    exit: {
      x: -1000,
      opacity: 0,
      transition: {
        x: { type: 'spring', stiffness: 300, damping: 30 },
        opacity: { duration: 0.2 },
      },
    },
  };

  return (
    <div className="w-full h-[550px] overflow-hidden relative">
      <AnimatePresence initial={false}>
        <motion.img
          variants={variants}
          animate="animate"
          initial="initial"
          exit="exit"
          alt="slides"
          key={(image[current] || {}).banner}
          className="slides z-20"
          src={(image[current] || {}).banner}
        />

        <div className="absolute w-[40%] h-auto overflow-hidden top-1/2 translate-y-[-50%] flex gap-4 m-auto right-8 z-40">
          {(image || []).map((items, index) => {
            return (
              <motion.img
                src={(items || {}).poster}
                key={index}
                className="w-[30%] object-cover"
                alt=""
                animate={{ x:
                  current === 0
                    ? [null, `calc(-300% - 3rem)`, `calc(0% - 0rem)`]
                    : `calc(-${current * 100}% - ${current}rem)`
                }}
                transition={{ times: [0, 1, 1] }}
              />
            );
          })}
          {(image || []).map((items, index) => {
            return (
              <motion.img
                src={(items || {}).poster}
                key={index}
                className="w-[30%] object-cover"
                alt=""
                animate={{ x:
                  current === 0
                    ? [null, `calc(-300% - 3rem)`, `calc(0% - 0rem)`]
                    : `calc(-${current * 100}% - ${current}rem)`
                }}
                transition={{ times: [0, 1, 1] }}
              />
            );
          })}
        </div>
      </AnimatePresence>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<Carousel />);

个字符

赞(0）回复(0）举报 5个月前

我来回答

javascript 尝试在滑块内循环显示三张牌

1条答案

相关问题

热门标签

最新问答