0

我将 DaisyUI 中的以下代码示例用于 React Carousel。虽然每个轮播项目都有一个 ID，但href锚标签中的内容是否应该只是 ID？href="slide2" 还是需要按照模板作为href="/components/carousel#slide2？我需要为每个轮播项目创建一个单独的组件吗？代码看起来不是这样，但仍然无法正常工作。不知道我错过了什么

    <div class="w-full carousel">
      <div id="slide1" class="relative w-full pt-20 carousel-item">
        <img src="https://picsum.photos/id/500/800/300" class="w-full"> 
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          <a href="/components/carousel#slide4" class="btn btn-circle">❮&lt;/a> 
          <a href="/components/carousel#slide2" class="btn btn-circle">❯&lt;/a>
        </div>
      </div> 
      <div id="slide2" class="relative w-full pt-20 carousel-item">
        <img src="https://picsum.photos/id/501/800/300" class="w-full"> 
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          <a href="/components/carousel#slide1" class="btn btn-circle">❮&lt;/a> 
          <a href="/components/carousel#slide3" class="btn btn-circle">❯&lt;/a>
        </div>
      </div> 
      <div id="slide3" class="relative w-full pt-20 carousel-item">
        <img src="https://picsum.photos/id/502/800/300" class="w-full"> 
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          <a href="/components/carousel#slide2" class="btn btn-circle">❮&lt;/a> 
          <a href="/components/carousel#slide4" class="btn btn-circle">❯&lt;/a>
        </div>
      </div> 
      <div id="slide4" class="relative w-full pt-20 carousel-item">
        <img src="https://picsum.photos/id/503/800/300" class="w-full"> 
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          <a href="/components/carousel#slide3" class="btn btn-circle">❮&lt;/a> 
          <a href="/components/carousel#slide1" class="btn btn-circle">❯&lt;/a>
        </div>
      </div>
    </div>
4

0 回答 0