最近在學習使用Quasar,一看到有輪播功能就迫不及待地學了這部分。
但是已經依照指示使用,卻還是無法正常顯示,也查了很多資料試圖排除這個狀況,但依然沒有答案,所以想請問各位大大有沒有遇過這樣的問題><
我遇到的問題是:
q-carousel的設定正常,但是q-carousel-slide的設定無法正常套用,不論是放純文字或是圖片都是一樣的狀況。
這個部分寫的內容如下
q-carousel的左右切換箭頭有正常顯示
打開DevTools確認到的狀況如圖片紅框顯示,裡面是空的,沒有文字,也沒有圖片。
進行流程如下:
另外,在嘗試排除錯誤時,有發現即使quasar.comf.js裡面沒有放入Carousel, CarouselSlide,依然可以套用q-carousel這個部分。
希望大大們能指引我一些方向,謝謝><
q-carousel 請設定v-model="slide",並在data()設定對應的變數
每一個q-carousel-slide,都需要給他對應的name
q-carousel才知道目前是顯示到哪一個「q-carousel-slide」
q-carousel-slide 設定圖片路徑是用「img-src」而不是「src」
請參考文件Media content的範例
https://quasar.dev/vue-components/carousel
如果有正常設定,是可以顯示的
https://codepen.io/ted59438/pen/VwjJOKq?editors=1010
<template>
<div class="q-pa-md">
<q-carousel
infinite
arrows
swipeable
v-model="slide"
navigation
>
<q-carousel-slide name="a" class="bg-red text-white">
<div>
dee
</div>
222222222222222
</q-carousel-slide>
<q-carousel-slide name="b" img-src="https://cdn.quasar.dev/img/mountains.jpg"></q-carousel-slide>
<q-carousel-slide name="c" img-src="https://cdn.quasar.dev/img/parallax1.jpg"></q-carousel-slide>
<q-carousel-slide name="d" img-src="https://cdn.quasar.dev/img/parallax2.jpg"></q-carousel-slide>
<q-carousel-slide name="e" img-src="https://cdn.quasar.dev/img/quasar.jpg"></q-carousel-slide>
</q-carousel>
</div>
</template>
<script>
export default {
data () {
return {
slide: 'a'
}
}
}
</script>