时间戳

首页 > 解决方案 > Ant Design Vue：当只有一个 div 内容时，轮播箭头消失

javascript - Ant Design Vue：当只有一个 div 内容时，轮播箭头消失

问题描述

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

问题是当轮播中只有一个内容时，箭头和点会消失。

轮播文档：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>

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

标签： javascriptcssvue.jsvue-componentantdv

解决方案

如果您有一张幻灯片，则无需显示该箭头，因为这会影响用户体验，但我只是建议添加一张幻灯片以指示幻灯片结束：

  <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>

推荐阅读