ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html
转载请注明出处: https://www.cnblogs.com/cqpanda/p/17177307.html
更新记录
2023年4月11日 发布。
Carousel组件（Morden Toolkit）
基本使用
{
xtype: 'carousel',
width: 500,
height: 300,
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
}, {
html : 'Item 2',
style: 'background-color: #759E60'
}, {
html : 'Item 3',
style: 'background-color: yellow'
}
]
}
指定UI风格
{
xtype: 'carousel',
ui: 'dark', // ui: 'light',
width: 500,
height: 300,
items: [
//...
]
}
指定滚动方向
{
xtype: 'carousel',
id: 'carouselId',
direction: 'vertical', // direction: 'horizontal',
width: 500,
height: 300,
items: [
//...
]
}
指定指示器是否显示
{
xtype: 'carousel',
//indicator: false,
width: 500,
height: 300,
items: [
//...
]
}
指定默认显示项
{
xtype: 'carousel',
activeItem: 1,
width: 500,
height: 300,
items: [
//...
]
}
向前切换
{
xtype: 'button',
text: 'Prev',
listeners: {
tap: function () {
let carousel = Ext.ComponentQuery.query('#carouselId')[0];
let items = carousel.getItems();
carousel.previous();
}
}
},
向后切换
{
xtype: 'button',
text: 'Next',
listeners: {
tap: function () {
let carousel = Ext.ComponentQuery.query('#carouselId')[0];
carousel.next();
}
}
},
Carousel（Classic Toolkit）
默认情况下，Classic Toolkit是没有Carousel组件的。
可以在网上或者github上找找看，或者使用其他的轮播图组件。找到记得通知我啊，老铁。