ReactJS中如何修改Owl Carousel自动播放的滚动方向？

Owl Carousel 官方没有直接提供反向自动播放的配置项，可通过以下两种方案实现单轮播从左向右滑动的效果，两个方案均不会影响另一个保持默认从右向左滑动的轮播。

方案1：纯CSS实现（推荐，无逻辑侵入） #

该方案不需要修改组件原有配置，仅通过自定义样式反转动画方向即可，不会干扰组件原生的悬停暂停、循环等逻辑。

1. 首先给需要调整方向的第二个轮播添加自定义类名：

// 第二个需要反向的轮播组件
<OwlCarousel
  className="owl-theme carousel-reverse"
  loop
  margin={40}
  nav={false}
  autoplay={true}
  autoplayTimeout={2000}
  autoplayHoverPause={true}
  items={4}
  dots={false}
>
  {imageSlider}
</OwlCarousel>

2. 新增对应CSS样式：

/* 反转动画方向实现从左向右滑动 */
.carousel-reverse .owl-stage {
  animation-direction: reverse;
}
/* 保留原生悬停暂停效果 */
.carousel-reverse:hover .owl-stage {
  animation-play-state: paused;
}

/* 如果发现轮播内容出现镜像翻转/顺序错乱，追加以下样式修正 */
.carousel-reverse .owl-item {
  transform: scaleX(-1);
}
.carousel-reverse .owl-item .item {
  transform: scaleX(-1);
}

方案2：开启内置RTL配置（快速实现） #

Owl Carousel 内置了右到左布局支持，开启后轮播自动播放方向会自动变为从左向右，仅需给目标轮播添加rtl={true}属性即可：

<OwlCarousel
  className="owl-theme"
  loop
  margin={40}
  nav={false}
  autoplay={true}
  autoplayTimeout={2000}
  autoplayHoverPause={true}
  items={4}
  dots={false}
  rtl={true} /* 开启RTL模式反转滑动方向 */
>
  {imageSlider}
</OwlCarousel>

注意：开启RTL后组件会默认将内部文本按右到左规则排版，若需要保持原有文本排版方向，追加以下样式修正即可：

.carousel-reverse .body_text {
  direction: ltr;
  text-align: left;
}

内容的提问来源于stack exchange，提问作者Ashutosh Raghuvanshi