CODEWITHSUNDEEP
reactjsowl-carousel
R-S
R-S

Reputation: 151

How can I use "react-owl-carousel-rtl"?

I want to install react-owl-carousel-rtl I followed the instructions at https://www.npmjs.com/package/react-owl-carousel-rtl

But still it does not work for me because of the direction: rtl

This is the code I wrote-

import OwlCarousel from "react-owl-carousel";
import "owl.carousel / dist / assets / owl.carousel.css";
import "owl.carousel / dist / assets / owl.theme.default.css";

<OwlCarousel loop={false} rtlClass="owl-rtl" margin={10}>
  <div>
    <h4>1</h4>
  </div>
  <div>
    <h4>2</h4>
  </div>
  <div>
    <h4>3</h4>
  </div>
  <div>
    <h4>4</h4>
  </div>
  <div>
    <h4>5</h4>
  </div>
</OwlCarousel>

Regards

Upvotes: 1

Views: 733

Answers (1)

Erfan Paslar
Erfan Paslar

Reputation: 120

I ran into this problem and unfortunately, the documentation was wrong!

so you need to change the import and add rtl property like this:

import OwlCarousel from "react-owl-carousel-rtl";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";

<OwlCarousel loop={false} rtlClass="owl-rtl" margin={10} rtl={true}>
  <div>
    <h4>1</h4>
  </div>
  <div>
    <h4>2</h4>
  </div>
  <div>
    <h4>3</h4>
  </div>
  <div>
    <h4>4</h4>
  </div>
  <div>
    <h4>5</h4>
  </div>
</OwlCarousel>

that worked for me :)

Upvotes: 1

Related Questions