当 onClick 元素处于 perPage 设置的循环中时出现幻灯片问题

Question

当我想单击 Splide 滑块中的某个元素时遇到问题。单击第一个循环的前 5 个元素是有效的，但是一旦进入包含 5 个元素的第二个循环，第一个循环中保持可见的元素就不再可单击。

这非常令人沮丧，因为屏幕上可能只有五个可见元素中的一个可点击元素。我想让所有可见元素都可点击，但是在互联网和各种论坛上搜索后，我找不到解决此问题的方法。如果您能帮助我，我将不胜感激！谢谢！

为了理解图像，方向是从上到下，因此第二个 5 个元素的循环出现在幻灯片的顶部，第一个 5 个元素的循环消失在幻灯片的底部。

第一个图像代表单击起作用的 5 个元素的第一个循环（绿色）。

第二张图片显示第二个循环的第一个元素出现的时间。该元素是可点击的（绿色），而我旧循环中的元素不再可点击（红色）

有没有办法让所有元素都可点击？

import React from "react";
import styled from "styled-components";
import { Splide, SplideSlide } from '@splidejs/react-splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
import "@splidejs/splide/dist/css/splide.min.css";


const StyledBanner = styled.div`
    margin: 0% 0px 0% 10%;

    img{
        height: 70%;
    }

`

function Banner({ comics, cover1, cover2, cover3, cover4, cover5, setSelectedImage }) {
    const handleImageClick = (imageSrc) => {
        setSelectedImage(imageSrc);
    };

    return (
        <StyledBanner>
            <Splide
                className="splide"
                aria-label="My Slide"
                options={{
                    type: 'loop',
                    direction: 'ttb',
                    throttle: 1,
                    height: '75vh',
                    drag: true,
                    focus: 'top',
                    perPage: 5,
                    arrows: false,
                    autoScroll: {
                        speed: -0.1,
                        pauseOnHover: false,
                        pauseOnFocus: false,
                    },
                }}
                extensions={{ AutoScroll }}
            >
                <SplideSlide>
                    <img src={cover1} alt="Image 1" onClick={() => handleImageClick(cover1)} />
                </SplideSlide>
                <SplideSlide>
                    <img src={cover2} alt="Image 2" onClick={() => handleImageClick(cover2)} />
                </SplideSlide>
                <SplideSlide>
                    <img src={cover3} alt="Image 3" onClick={() => handleImageClick(cover3)} />
                </SplideSlide>
                <SplideSlide>
                    <img src={cover4} alt="Image 4" onClick={() => handleImageClick(cover4)} />
                </SplideSlide>
                <SplideSlide>
                    <img src={cover5} alt="Image 5" onClick={() => handleImageClick(cover5)} />
                </SplideSlide>
            </Splide>
        </StyledBanner>
    );
}

export default Banner;```

Answer 1

除了单击图像之外，您还可以使用滑块 onClick 滑动滑块的默认功能 我尝试使用 onClick 默认选项，它按您想要的方式工作

试试这个

import React from 'react';
import styled from 'styled-components';
import { Splide, SplideSlide } from '@splidejs/react-splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
import '@splidejs/splide/dist/css/splide.min.css';

const StyledBanner = styled.div`
  margin: 0% 0px 0% 10%;

  img {
    height: 70%;
  }
`;

function Banner({ comics, cover1, cover2, cover3, cover4, cover5, setSelectedImage }) {
  const handleImageClick = (imageSrc) => {
    setSelectedImage(imageSrc);
  };

  return (
    <StyledBanner>
      <Splide
        className="splide"
        aria-label="My Slide"
        options={{
          type: 'loop',
          direction: 'ttb',
          throttle: 1,
          height: '75vh',
          drag: true,
          focus: 'top',
          perPage: 5,
          arrows: false,
          autoScroll: {
            speed: -0.1,
            pauseOnHover: false,
            pauseOnFocus: false,
          },
        }}
        onClick={(_slide, e) => {
          console.log(e);
        }}
        extensions={{ AutoScroll }}
      >
        <SplideSlide>
          <img src={cover1} alt="Image 1" onClick={() => handleImageClick(cover1)} />
        </SplideSlide>
        <SplideSlide>
          <img src={cover2} alt="Image 2" onClick={() => handleImageClick(cover2)} />
        </SplideSlide>
        <SplideSlide>
          <img src={cover3} alt="Image 3" onClick={() => handleImageClick(cover3)} />
        </SplideSlide>
        <SplideSlide>
          <img src={cover4} alt="Image 4" onClick={() => handleImageClick(cover4)} />
        </SplideSlide>
        <SplideSlide>
          <img src={cover5} alt="Image 5" onClick={() => handleImageClick(cover5)} />
        </SplideSlide>
      </Splide>
    </StyledBanner>
  );
}

export default Banner;

Answer 2

我设法做出了一些有用的东西。

就在我的 Splide 元素的索引级别，当元素是克隆时，这有点令人不安。

例如：第一个元素的索引为 0，但当它成为克隆时，其索引更改为 6（在我的例子中，有 5 个 SplideSlide 元素）

我设法解决了这个问题，但我不知道是否有更好的方法。

import React from "react";
import styled from 'styled-components';
import { Splide, SplideSlide } from '@splidejs/react-splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
import '@splidejs/splide/dist/css/splide.min.css';

const StyledBanner = styled.div`
  margin: 0% 0px 0% 10%;

  img {
    height: 70%;
  }
`;

function Banner({ cover0, cover1, cover2, cover3, cover4, cover5, setSelectedImage }) {
    const covers = [cover0, cover1, cover2, cover3, cover4, cover5];
    const size = covers.length;

    const handleImageClick = (index) => {
        if(index < size){
            const selectedCover = eval(`cover${index}`);
            setSelectedImage(selectedCover);
        }
        else{
            index = index - size;
            const selectedCover = eval(`cover${index}`);
            setSelectedImage(selectedCover);
        }
      }; 

  return (
    <StyledBanner>
      <Splide
        className="splide"
        aria-label="My Slide"
        options={{
          type: 'loop',
          direction: 'ttb',
          throttle: 1,
          height: '75vh',
          drag: true,
          focus: 'top',
          perPage: 5,
          arrows: false,
          pagination: false,
          wheel: true,
          omitEnd: true,
          updateOnMove: true,
          keyboard: 'global',
          autoScroll: {
            speed: -0.1,
            pauseOnHover: false,
            pauseOnFocus: false,
          },
        }}
        onClick={(_slide, e) => {
            handleImageClick(e.index);
          }}
        extensions={{ AutoScroll }}
      >
        <SplideSlide>
          <img src={cover0} alt="Image 5"  />
        </SplideSlide>
        <SplideSlide>
          <img src={cover1} alt="Image 1"  />
        </SplideSlide>
        <SplideSlide>
          <img src={cover2} alt="Image 1"  />
        </SplideSlide>
        <SplideSlide>
          <img src={cover3} alt="Image 2"  />
        </SplideSlide>
        <SplideSlide>
          <img src={cover4} alt="Image 3"  />
        </SplideSlide>
        <SplideSlide>
          <img src={cover5} alt="Image 4"  />
        </SplideSlide>
      </Splide>
    </StyledBanner>
  );
}

export default Banner;