反应-尾风- DaisyUI旋转木马

Question

我正在使用来自DaisyUI的以下代码示例作为。虽然每个旋转木马项目都有一个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">❮</a> 
          <a href="/components/carousel#slide2" class="btn btn-circle">❯</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">❮</a> 
          <a href="/components/carousel#slide3" class="btn btn-circle">❯</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">❮</a> 
          <a href="/components/carousel#slide4" class="btn btn-circle">❯</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">❮</a> 
          <a href="/components/carousel#slide1" class="btn btn-circle">❯</a>
        </div>
      </div>
    </div>

Answer 1

通过这样做，我能够让旋转木马工作起来：

<a href="#slide3" class="btn btn-circle">

然后将href添加到URL：http://localhost:3000/#slide3中。