React 响应式轮播将指示器更改为矩形的全宽

Question

我试图使指示器看起来是矩形并根据图像长度覆盖整个宽度，如下图所示：

尽管问题似乎是这样，但我无法并排放置 div，它们始终保持为列：

import 'react-responsive-carousel/lib/styles/carousel.min.css'
import { Carousel } from 'react-responsive-carousel'

<Carousel
          className="flex relative w-full h-[328px]  overflow-hidden bg-black mb-[17px]"
          showArrows={false}
          showThumbs={false}
          showStatus={false}
          autoPlay
          infiniteLoop
          renderIndicator={(_, selected, indIndex) => {
            console.log('called')
            return (
              <div className="flex flex-row gap-2">
                <div
                  className="w-[100px] h-[2px]"
                  style={{
                    background: selected ? 'red' : 'blue',
                  }}
                ></div>
              </div>
            )
          }}
        >
          {images.map((URL, index) => (
            <div className="object-cover h-full w-full">
              <img src={URL} key={index} />
            </div>
          ))}
        </Carousel>

该图像包含 3 个 div，红色代表选中的，蓝色代表未选中的。

Answer 1

回应：

 <Carousel
          className="flex relative w-full h-[328px]  overflow-hidden bg-black mb-[17px]"
          showArrows={false}
          showThumbs={false}
          showStatus={false}
          autoPlay
          infiniteLoop
          renderIndicator={(_, selected, index) => {
            const numIndicators = images.length
            const margin = '5px'
            const indicatorWidth = `calc((100% - ${margin} * ${numIndicators - 1}) / ${numIndicators})`

            return (
              <div
                className="inline-block"
                style={{
                  width: indicatorWidth,
                  height: '5px',
                  background: selected ? 'white' : 'grey',
                  marginRight: index !== numIndicators - 1 ? margin : '0',
                }}
              />
            )
          }}
        >
          {images.map((URL, index) => (
            <div className="object-cover h-full w-full">
              <img src={URL} key={index} />
            </div>
          ))}
        </Carousel>