跳至主要内容

響應式設定(RWD)

提示

注意這裡的設置是從小到大的設定 (參考Bootstrap RWD 設計),使用覆蓋的方法

如果需要不同尺寸使用不同的顯示方式,可以試試這個

<BearCarousel 
// ...ignore some
slidesPerView={1}
height={{widthRatio: 22, heightRatio: 9}}
isEnablePagination
isEnableLoop
breakpoints={{
768: {
slidesPerView: 2,
height: {widthRatio: 16, heightRatio: 9},
isEnableLoop: false,
isEnablePagination: false,
isEnableNavButton: false,
},
1200: {
slidesPerView: 4,
height: {widthRatio: 32, heightRatio: 9},
isEnableLoop: true,
isEnablePagination: true,
isEnableNavButton: true,
}
}}
/>

拖動瀏覽器視窗的尺寸試試看?