React Autoplay not working.

[matanist]

 <Splide
                                options={{
                                    type: 'loop',
                                    gap: '1rem',
                                    autoplay: true,
                                    pauseOnHover: false,
                                    resetProgress: false,
                                    arrows: 'slider',
                                }}
                                hasSliderWrapper
                                hasAutoplayControls
                                hasAutoplayProgress
                            >
                                {
                                    this.state.slidersAndBanners ? this.state.slidersAndBanners.filter(s => s.contentType === 1).map(s => (
                                        <SplideSlide key={s.id}>
                                            <img src={`/Images/${s.imageUrl}`} alt={s.title} />
                                        </SplideSlide>
                                    )) : ""
                                }
                            </Splide>

I use Component. How to use autoplay with Component from 'react' Pictures shown but autoplay not working.

[7nohe]

So far, I've worked around this issue by using setInterval().

import { Splide, SplideSlide } from '@splidejs/react-splide'
import { useEffect, useRef } from 'react';

export default function Slider() {
  const ref = useRef()
  useEffect(() => {
      setInterval(() => {
        ref.current.splide.go('>');
      }, 5000);
   }, []);

  return (
      <Splide ref={ref}>
        <SplideSlide>Slide 1</SplideSlide>
        <SplideSlide>Slider 2</SplideSlide>
        <SplideSlide>Slide 3</SplideSlide>
      </Splide>
  )
}

[sindy-senorita]

In my case, looks like splide cannot detect autoplay if all the SplideSlide was set programmatically, i.e. before props render, Splide has no child at all. This does not work

<Splide options={{
                autoplay: true,
                rewind: true,
                interval: autoplayInterval,
            }}>
                {content.map(i => 
                    <SplideSlide>
                        <div className="image_div" style={{ backgroundImage: `url(${i.file})` }} key={i.priority}/>
                    </SplideSlide>
                )}
            </Splide>

But, this works

<Splide options={{
                autoplay: true,
                rewind: true,
                interval: autoplayInterval,
            }}>
                  <SplideSlide>
                      <div className="image_div" style={{ backgroundImage: `url(${file1})` }} key={i.priority} />
                      <div className="image_div" style={{ backgroundImage: `url(${file2})` }} key={i.priority} />
                      <div className="image_div" style={{ backgroundImage: `url(${file3})` }} key={i.priority} />
                  </SplideSlide>
            </Splide>

So, my hack is, add a single item alongside the loop, so inside Splide will never be empty

const firstContent = props.content[0]
const otherContent = props.content.slice(1, props.content.length)

<Splide options={{
               autoplay: true,
                rewind: true,
                interval: autoplayInterval,
            }}>
                <SplideSlide> 
                    <div className="image_div" style={{ backgroundImage: `url(${firstContent.file})` }}/>
                </SplideSlide>
                {otherContent.map(i => 
                    <SplideSlide>
                        <div className="carousel-slide image_div" style={{ backgroundImage: `url(${i.file})` }} key={i.priority}/>
                    </SplideSlide>
                )}
            </Splide>

[NaotoshiFujita]

Close the issue due to the major version update. Feel free to create a new issue or open a new discussion.

---

Now it seems not to happen. https://codesandbox.io/s/autoplay-br1pg

[unaigl]

You also can try with "@splidejs/splide-extension-intersection". It works quit similar. Besides "Splide has no child at all" at first render (using array.map()), works well.

using react: `import { Splide, SplideSlide } from "@splidejs/react-splide" import { Intersection } from "@splidejs/splide-extension-intersection"

<Splide options={{ rewind: true, autoplay: true, interval: 2000, intersection: { inView: { autoplay: true, }, }, }} extensions={{ Intersection }}

{otherContent.map(i =>

)} `

[huboh]

Here is a confirmed workaround even with no children on first render by using the onMounted callback.

<Splide 
  hasTrack={ false } 
  options={ { 
    type: "loop", 
    start: 0, 
    rewind: true, 
    interval: 5000, 
    autoPlay: true, 
    ... 
  } } 
  onMounted={ 
    (splide) => { 
      splide.Components.Autoplay.play(); 
    } 
  } 
> 
  <SplideTrack children={ images.map((image) =>  <SplideSlide />)) />
</Splide>