由于官方文档写的非常少,生怕你看懂了,经过各种百度搜索,终于找到了具体用法,记录下来
<a-carousel arrows ref="varousel" :dots="true">
<div
slot="prevArrow"
class="custom-slick-arrow"
style="left: 10px;zIndex: 1;"
>
<img src="~@/content/images/left_arrow.png" alt />
</div>
<div
slot="nextArrow"
slot-scope="props"
class="custom-slick-arrow"
style="right: 10px;zIndex: 1;"
>
<img src="~@/content/images/right_arrow.png" alt />
</div>
<div>
<img src="~@/content/images/event.jpg" style="width: 100%;height: 560px;" />
</div>
<div>
<img src="~@/content/images/bg.jpg" style="width: 100%;height: 560px;" />
</div>
<div>
<img src="~@/content/images/modal_head_bg.png" style="width: 100%;height: 560px;" />
</div>
</a-carousel>
<div class="imgGroup">
<img src="~@/content/images/event.jpg" alt="1" @click="goTo(1, false)" :class="{ select: currentIndex==1 }"/>
<img src="~@/content/images/bg.jpg" alt="2" @click="goTo(2, false)" :class="{ select: currentIndex==2 }"/>
<img src="~@/content/images/modal_head_bg.png" alt="3" @click="goTo(3, false)" :class="{ select: currentIndex==3 }"/>
</div>
</a-modal>
</template>
goTo(index: any) {
this.currentIndex = index;
(this.$refs["varousel"] as any).goTo(index - 1);
}