Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Splide Slide issue when onClick elements are on a loop with perPage set

I have an issue when I want to click on an element in my Splide slider. Clicking on the first 5 elements of my first loop works, but as soon as the second loop of 5 elements comes in, the elements from my first loop that remain visible are no longer clickable.

It’s quite frustrating because there might be only one clickable element out of five visible on the screen. I would like to make all visible elements clickable, but after searching on the Internet and various forums, I can’t find a solution to this problem. If you can help me, I would be grateful! Thank you!

To understand the images, the direction is from top to bottom, so the second loop of 5 elements appears at the top of the Slide and the first loop of 5 elements disappears at the bottom of the Slide.

The first image represents the first loop of 5 elements where the click works (in green).

The second image shows when the first element of the second loop appears. This element is clickable (in green), and those from my old loop are no longer clickable (in red)

First loop with all elements clickable

Second loop appears and the first loop elements are not clickable

Is there a way to make all elements clickable?

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;```
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I managed to make something that works.

    There is just at the level of the indexes of the elements of my Splide which is a little disturbing when the elements are clones.

    For example: the first element has an index of 0 but when it becomes a clone its index changes to 6 (in my case where there are 5 SplideSlide elements)

    I managed to work around the problem but I don't know if there is a better way to do it.

    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;

  2. 0

    Instead of click on image you can also use slider onClick default function of splide slider
    I tried with onClick default option and it is working as you want

    try this

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search