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?

The Ant carousel is a wrapper of the [slick carousel.](https://kenwheeler.github.io/slick/). The slick carousel's default behaviour is to remove the arrows if there is only one slide (this makes sense since there is no more slides to navigate to), A workaround could be to disable the arrows and make them yourself as seen in this [SO post](https://stackoverflow.com/questions/35868523/slickjs-always-show-arrows) — Sølve T., Sep 02 '20 at 19:31
How can I implement that in Vue? Can I do it without jQuery? — Francesco Dorati, Sep 03 '20 at 13:15
You can use the methods [next() & prev()](https://ant.design/components/carousel/#Methods) on your new arrows and hide the default arrows via css. — Sølve T., Sep 03 '20 at 14:07
I mean, how can I access slick carousel's settings? Should I create a new slick carousel from scratch? — Francesco Dorati, Sep 06 '20 at 16:43

score 3 · Answer 1 · answered Sep 05 '20 at 12:00

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>

I'm trying to develop an Instagram Story Clone, I need arrows also when there's only one content because when that arrow is clicked the story changes and the carousel's content switches to another user's content. — Francesco Dorati, Sep 06 '20 at 16:42

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

1 Answers1