如何在react swiper中使用滚动条？

问题描述

滚动指示未显示。我在这里想念东西吗？

https://codesandbox.io/s/gallant-gagarin-8k3co?file=/src/App.js

我正在将DOM与js中的示例进行比较

https://swiperjs.com/demos/080-scrollbar.html

滚动条如下所示：

<div class="swiper-scrollbar" style="opacity: 0; transition: all 400ms ease 0s;"><div class="swiper-scrollbar-drag" style="transform: translate3d(751.8px,0px,0px); transition: all 0ms ease 0s; width: 107.4px;"></div></div>

在我的应用程序中，我刚刚

<div class="swiper-scrollbar"></div>

，并且没有 swiper-scrollbar-drag 元素

解决方法

明白了。忘记安装其他组件

import SwiperCore,{ Scrollbar } from 'swiper';
import { Swiper,SwiperSlide } from 'swiper/react';
SwiperCore.use([Scrollbar]);