swiper/react SwiperSlide 的图像在自动播放前出现乱序

Question

所以，我真的很难将这些幻灯片的图像与正确的幻灯片相关联。当数据首次在 <Swiper> 中的 <SwiperSlide> 组件上初始化时，图像与其对象值不匹配，但屏幕上显示的下一张幻灯片是正确的。在自动播放的某个地方，元素混淆了，<div className="abs_img" data-bg-img={item.img} /> 元素开始变得不同步。我的猜测必须是自动播放或 <Swiper> 的道具中的东西？

<Swiper {...portfolioSliderProps} className="owl-carousel modal_items" data-from="portfolio">
    {data.map((item) => {
        return (
            <SwiperSlide
                key={item.id}
                className="item modal_item"
                onClick={() => {
                    setModal(true);
                    setModalValue(item.id);
                }}
                data-index={item.id}
            >
                <div className="img_holder">
                    <img src="img/thumb/square.jpg" alt="image" />
                    <div className="abs_img" data-bg-img={item.img} />
                </div>
                <div className="title_holder">
                    <p>{item.tag}</p>
                    <h3>
                        <a href="#">{item.name}</a>
                    </h3>
                </div>
                <div className="fn__hidden">
                    <p className="fn__cat">{item.tag}</p>
                    <h3 className="fn__title">{item.name}</h3>
                    <div className="img_holder">
                        <img src="img/thumb/square.jpg" alt="image" />
                        <div className="abs_img" data-bg-img={item.img} />
                    </div>
                    <p className="fn__desc">{item.desc[0].p}</p>
                </div>
            </SwiperSlide>
        );
    })}
</Swiper>

const portfolioSliderProps = {
    slidesPerView: 1,
    loop: true,
    spaceBetween: 30,
    speed: 1000,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".next",
        prevEl: ".prev",
    },
    breakpoints: {
        480: {
            slidesPerView: 2,
        },
        1400: {
            slidesPerView: 3,
        },
    },
};

const data = [
        {
            id: 1,
            name: "Sweet Cherry",
            tag: "illustration, design",
            desc: [
                {
                    p: "Sed ornare tellus a odio bibendum, at tristique sapien malesuada. Proin sagittis maximus accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Sed sollicitudin rhoncus blandit. Nam accumsan vestibulum enim. Sed rutrum eu leo pellentesque lobortis. Integer ornare fringilla arcu, eu mattis risus convallis in.",
                },
            ],
            github: "#",
            link: "#",
            img: "img/portfolio/1.jpg",
        },
        {
            id: 2,
            name: "Delicious Fruit",
            tag: "web, mobile, online",
            desc: [
                {
                    p: "Proin sagittis maximus accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Integer ornare fringilla arcu, eu mattis risus convallis in.",
                },
                {
                    p: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Sed sollicitudin rhoncus blandit. Nam accumsan vestibulum enim. Sed rutrum eu leo pellentesque lobortis. Integer ornare fringilla arcu, eu mattis risus convallis in. Sed ornare tellus a odio bibendum, at tristique sapien malesuada. ",
                },
            ],
            github: "#",
            link: "#",
            img: "img/portfolio/2.jpg",
        },
        {
            id: 3,
            name: "Ice Cream",
            tag: "mobile, design",
            desc: [
                {
                    p: "Sed ornare tellus a odio bibendum, at tristique sapien malesuada. Proin sagittis maximus accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Sed sollicitudin rhoncus blandit. Nam accumsan vestibulum enim. Sed rutrum eu leo pellentesque lobortis. Integer ornare fringilla arcu, eu mattis risus convallis in.",
                },
            ],
            github: "#",
            link: "#",
            img: "img/portfolio/3.jpg",
        },
        {
            id: 4,
            name: "Blue Lemon",
            tag: "design, vector",
            desc: [
                {
                    p: "Proin sagittis maximus accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Integer ornare fringilla arcu, eu mattis risus convallis in.",
                },
                {
                    p: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Sed sollicitudin rhoncus blandit. Nam accumsan vestibulum enim. Sed rutrum eu leo pellentesque lobortis. Integer ornare fringilla arcu, eu mattis risus convallis in. Sed ornare tellus a odio bibendum, at tristique sapien malesuada.",
                },
            ],
            github: "#",
            link: "#",
            img: "img/portfolio/4.jpg",
        },
        {
            id: 5,
            name: "Yellow Phone",
            tag: "mobile, design",
            desc: [
                {
                    p: "Proin sagittis maximus accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Integer ornare fringilla arcu, eu mattis risus convallis in.",
                },
                {
                    p: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Sed sollicitudin rhoncus blandit. Nam accumsan vestibulum enim. Sed rutrum eu leo pellentesque lobortis. Integer ornare fringilla arcu, eu mattis risus convallis in. Sed ornare tellus a odio bibendum, at tristique sapien malesuada.",
                },
            ],
            github: "#",
            link: "#",
            img: "img/portfolio/5.jpg",
        },
    ];

https://codesandbox.io/s/swiper-nextjs-swiperslide-help-6wzln?file=/src/components/Portfolio.js

我之前 post 编辑了这篇文章，但没有任何原因得到了负面评价！如果我的post有问题，请留言，我会及时修复

Answer 1

所以我确定还有其他方法可以解决这个问题，但我发现问题出在 <Swiper> 的属性 loop: true 上。我删除了那个道具，想象被分配到正确的幻灯片。

更新道具：

const portfolioSliderProps = {
    slidesPerView: 1,
    spaceBetween: 30,
    speed: 1000,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".next",
        prevEl: ".prev",
    },
    breakpoints: {
        480: {
            slidesPerView: 2,
        },
        1400: {
            slidesPerView: 3,
        },
    },
};

swiper/react SwiperSlide 的图像在自动播放前出现乱序

swiper/react SwiperSlide's images out of order until autoplay

javascript

html

css

reactjs

swiper