How do I set autoplay options when using the Element web component in React?

[mattbarnicle]

I'm following the instructions here: https://swiperjs.com/element#usage-with-react

Here is my code:

import { register } from 'swiper/element/bundle'

register()

const MySwiper = ({ slides }) => (
  <swiper-container
    effect="slide"
    navigation="false"
    pagination="false"
    autoplay="true"
    space-between="30"
    loop="true"
    allow-touch-move="false"
    prevent-clicks="false"
  >
    { slides.map((slide, index) => (
      <swiper-slide key={ index }>
        { slide }
      </swiper-slide>
    ))}
  </swiper-container>
)

Previously, before I was doing this the React Way, I was doing this:

const swiper = new Swiper('.swiper-container', {
  spaceBetween: 30,
  effect: 'slide',
  loop: true,
  preventClicks: false,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
    reverseDirection: true,
  },
})

I've tried a variety of ways of passing the autoplay options into the swiper-container element, but can't get anything to work. And I can't find any examples in the docs or any discussions that address this topic.

[kilianso]

From what i understand, autoplay is not part of the core and needs to be imported as a module. And i currently don't see any docs on how to do that "the web component way". It's only written that dealing with modules can be done using the classical approach: https://swiperjs.com/element#core-version-and-modules

[nolimits4web]

https://swiperjs.com/element#parameters-as-props

[Koreanderson]

@mattbarnicle

You can pass Swiper object params in the [key]-[subkey] format.

https://swiperjs.com/element#parameters-as-attributes

So to match your previous autoplay settings you could update your swiper-container element like so:

<swiper-container
    effect="slide"
    navigation="false"
    pagination="false"
    autoplay-delay="5000"
    autoplay-disable-on-interaction="false"
    autoplay-reverse-direction="true"
    space-between="30"
    loop="true"
    allow-touch-move="false"
    prevent-clicks="false"
  >
...
</swiper-container>

[alexmattingley]

This is part of the issue, but how do you actually include the autoplay module so these props actually work? There aren't clear instructions for the react way to do this, only the web component way

[mattbarnicle]

@Koreanderson that did the trick, thanks!

[mora260]

Simple, easy and straight to the point. This is the way to do it! Also worked like a charm in an Angular project!

[grand-rick001]

Thanks, it worked !