ExtJS 轮播图UI组件(Carousel)

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上找找看，或者使用其他的轮播图组件。找到记得通知我啊，老铁。