I have integrated the Ant Design Vue Carousel into my Instagram Story Clone project to showcase dynamically generated backend data.
However, I've encountered an issue where the arrows and dots disappear when there is only one item in the carousel.
You can find the Carousel documentation here:
For reference, you can view the code on Code Sandbox here: https://codesandbox.io/s/brave-blackwell-e6d5c?file=/src/App.vue
When Arrows are 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>
When Arrows are 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>
I am seeking guidance on how to ensure that the arrows remain visible even when there is only one item in the carousel. Any suggestions?