Ant Design Vue: Carousel arrows disappear when there's only one div content

Question

I'm using Ant Design Vue's Carousel to display some backend generated data in a Instagram Story Clone project.

The problem is that when there's only one content in the carousel, the arrows and dots disappear.

Carousel Docs: https://antdv.com/components/carousel

Code Sandbox: https://codesandbox.io/s/brave-blackwell-e6d5c?file=/src/App.vue

Arrows Showing:

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

Arrows not showing:

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

How can I make sure that the arrows keep displaying also when there's only one content?

Answer 1

If you have one slide there's no need to show that arrows because this plays against the user experience, but i will simply suggest to add one slide that indicates the slideshow end :

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