How to use next() about react-owl-carousel

[Russy]

You can do something like this.

...
carousel = null;
options = {};
constructor() {
super();
let _this = this;
this.options = {
onInitialized: function(){
_this.carousel = this;
}
};
}
next() {
this.carousel.next();
}
...

[tizano]

Hi, I have the same issue and I don't know how to solve it.
Here is my Carousel component using owl carousel

import React from 'react';
import PropTypes from 'prop-types';
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import './CarouselRGPD.css';

const Carousel = ({ children }) => (
  <OwlCarousel
    className="owl-theme"
    margin={15}
    dots
    mouseDrag={false}
    touchDrag={false}
    stage="25"
    responsive={{
                0: {
                    items: 1,
                },
            }}
  >
    {children}
  </OwlCarousel>
);

Carousel.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Carousel;

Then I call it in an other component where I map on an array to create a carousel

<CarouselRGPD ref={(el) => { this.rgpd = el; }}>
  {listPermission.map(perm => (
    <CardContent className={classes.cardContent} key={perm.id}>
      <Typography variant="headline" component="h2" className={classes.cardTitle}>
        Permission: {perm.attributes.title}
      </Typography>
      <FormGroup>
        <FormControlLabel
          control={
            <Switch
              checked={checkedDisable}
              onChange={this.handleChangeDisable('checkedDisable')}
              value="checkedDisable"
              color="primary"
            />
          }
          label="Je ne souhaite pas être contacté par une notification"
        />
      </FormGroup>
      ....
      <Button
        variant="contained"
        size="large"
        className={classes.button}
        color="primary"
        onClick={e => this.handleNextClick(e)}
        disabled={!navigator.onLine}
      >
        Suivant
      </Button>
    </CardContent>
  ))}
</CarouselRGPD>

And my handleClick

handleNextClick = (event) => {
  event.preventDefault();
  // get it with ref, declared as prop in Carousel
  console.log(this.rgpd);
  // WHAT I'M TRYING TO DO
  // this.rgpd.next();
  // OR
  // this.rgpd.owlCarousel.trigger('next.owl.carousel');
  return true;
}

So, nothing is happening because the ref rgpd doesn't have the next() method.

What it's look like in the project, so as I explained before I would like to call next() on the button's click.

Thank you for reading, I would appreciate some help with an example if possible 😃

[tarikhamilton]

I found this confusing as well. I'm assuming you may have resolved it already! For future visitors of this issue, try this:

<OwlCarousel
  onInitialize={function() {
    this.next();
  }}
>

Basically, if you use a regular function rather than a fat arrow function, you are in the context of the component.

[pavan168]

step 1 - In your constructor create the options object which will be passed to OwnCaroussel in step 2

constructor() { super(); this.options = { onInitialized: function(){ this.carousel = this; } };

Step 2 - Pass options to OwlCarousel as follows
<OwlCarousel {...this.options}>

Step 3 - now you can call any of carousel's methods - For an example -

this.carousel.next() or this.carousel.prev() etc.

Hope this helps :)

[mohammedbahnini]

The key is to use a regular function for the onInitialized event of the carousel , you can follow the steps below :
step 1 : inside the render method , define the carousel's options
const self = this; const options = { items: 4, dots: true, responsive: { 0: { items: 5, margin: 20 }, 480: { items: 4 } }, onInitialized: function () { self.carousel = this; } }
step 2 : pass the options to the carousel
<OwlCarousel {...options} > </OwlCarousel >
step 3 : in the next button , you can call the next method inside the carousel property
<button onClick={() => this.carousel.next()}>Next</button>

i hope this will work for the upcoming visitors , and help the community .