Ant Design Vue:当只有一个div内容时，旋转木马箭头消失

Question

我正在使用Ant Design Vue的Carousel在Instagram Story Clone项目中显示一些后端生成的数据。

问题是，当carousel中只有一个内容时，箭头和点就消失了。

转盘文档：https://antdv.com/components/carousel

代码沙盒：https://codesandbox.io/s/brave-blackwell-e6d5c?file=/src/App.vue

箭头显示：

<a-carousel arrows>

    <!-- Left Arrow -->
    <div
      slot="prevArrow"
      slot-scope="props"
      class="custom-slick-arrow"
      style="left: 10px;zIndex: 1"
    >
      <a-icon type="left-circle" />
    </div>

    <!-- Right Arrow -->
    <div
      slot="nextArrow" 
      slot-scope="props"
      class="custom-slick-arrow" 
      style="right: 10px"
    >
      <a-icon type="right-circle" />
    </div>

    <div><h3> Content 1 </h3></div>
    <div><h3> Content 2 </h3></div>
  </a-carousel>

箭头未显示：

<a-carousel arrows>

    <!-- Left Arrow -->
    <div
      slot="prevArrow"
      slot-scope="props"
      class="custom-slick-arrow"
      style="left: 10px;zIndex: 1"
    >
      <a-icon type="left-circle" />
    </div>

    <!-- Right Arrow -->
    <div
      slot="nextArrow" 
      slot-scope="props"
      class="custom-slick-arrow" 
      style="right: 10px"
    >
      <a-icon type="right-circle" />
    </div>

    <div><h3> Just content 1 </h3></div>
 </a-carousel>

当只有一个内容时，我如何确保箭头继续显示？

Answer 1

如果你只有一张幻灯片，就不需要显示箭头，因为这不利于用户体验，但我会简单地建议添加一张幻灯片来指示幻灯片的结束：

  <a-carousel arrows>
    <!-- Left Arrow -->
    <div
      slot="prevArrow"
      slot-scope="props"
      class="custom-slick-arrow"
      style="left: 10px;zIndex: 1"
    >
      <a-icon type="left-circle"/>
    </div>

    <!-- Right Arrow -->
    <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
      <a-icon type="right-circle"/>
    </div>

  
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>End :)</h3>
       <h4> Don't forget to follow us</h4>
    </div>
   
  </a-carousel>