如何解决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>
当只有一个内容时,如何确保箭头也持续显示?
解决方法
如果您有一张幻灯片,则不需要显示箭头,因为这与用户体验背道而驰,但是我只建议添加一张幻灯片来指示幻灯片放映结束:
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。