Need an Image Carousel

[dougbieber]

I've been looking for an image carousel for EXTJS 6.2.1. I see there's one associated with the "Modern" toolkit, however we're using "Classic". Can anyone point me to a clean implementation of an image carousel? Most likely I'll have to maintain that code. Any help would be appreciated.

Regards,

-Doug

[Kevin Jackson]

The Carousel is not a container available in the Classic toolkit.

Anything you did would likely be a subclass of a card layout Here is the documentation http://docs.sencha.com/extjs/6.2.1/c...iner.Card.html

I did find this that might help you as a starting point http://stackoverflow.com/questions/2...implementation

Perhaps someone else in the community has tried to do the same. It's not something in the Classic toolkit.


Kevin Jackson
Sencha Support Team

[niallobrien]

Curious, how difficult is it to integrate a jQuery plugin? I only ask as I've used Ken Wheeler's Slick carousel and it's awesome http://kenwheeler.github.io/slick/

[Kevin Jackson]

Niall -

Here's some info https://dzone.com/articles/how-use-extjs-4-jquery

It uses the old version of the framework in the examples but you should get the idea.

and this

http://stackoverflow.com/questions/1...ne-application

Hope that helps


Kevin Jackson
[i]Sencha Support Team[i]

[dougbieber]

I've spent some time investigating this and aside from inventing my own carousel or trying to maintain someone else's I had to push back on the requirements. I'll wait until Sencha delivers such a component for the Classic toolkit.

[Donald_Gould]

Carousel Built for EXT 4.0, but should be easy to convert...

//
//  UX Carousel
//  DS Gould
//  04-11-2013
//
Ext.define('Ext.ux.Carousel',
{
    bodyCls : 'carousel',
//cls : 'carousel',
    extend : 'Ext.panel.Panel',
    alias : 'widget.carousel',
    layout :
    {
        type : 'card'
    },
    
    defaultType : 'image',
    currentIndex : 0,
    
    // Initialize Component
    initComponent : function()
    {
 this.items = this.buildItems(this.initialConfig.items);
 
 this.dockedItems = this.buildDockedItems();
        
 this.callParent(arguments);
    },
    // Factory Methods
    buildItems : function(items)
    {
 var returnItems = [];
 
 if (items.length > 0)
 {
     returnItems = items;
 }
 else
 {
     returnItems.push(Ext.create('Ext.panel.Panel',
     {
  html : 'No Items To Display'
     }));
 }
 
        return returnItems;
    },
    
    buildDockedItems: function ()
    {
        return [
        {
            xtype: 'toolbar',
            dock: 'left',
            cls: 'teeTimesButtonLeft',
            //baseCls : 'testCls',
            items:
            [
//     {
//                xtype : 'tbfill'
//            },
            {
                xtype: 'button',
                cls: 'carouselButtonLeft',
//                margin: '125 0 0 0',
                scope: this,
                handler: function ()
                {
                    this.previousImage();
                }
            },
            //{
            //    xtype : 'tbfill'
            //}
            ]
        },
        {
            xtype: 'toolbar',
            dock: 'right',
            cls: 'carouselButtonRight',
            items:
            [
//     {
//                xtype : 'tbfill',
//  bodyCls : 'transparentBody'      
//            },
            {
                xtype: 'button',
                cls: 'teeTimesButtonRight',
//                margin: '125 0 0 0',
                scope: this,
                handler: function ()
                {
                    this.nextImage();
                }
            },
//            {
//                xtype : 'tbfill',
//  bodyCls : 'transparentBody'    
//            }
            ]
        }];
    },
    
    previousImage : function()
    {
        this.currentIndex --;
        
        if(this.currentIndex < 0) this.currentIndex = this.items.getCount() - 1;
        
        this.displayImage(this.currentIndex);
    },
    
    nextImage : function()
    {
        this.currentIndex ++;
        
        if(this.currentIndex > this.items.getCount() - 1) this.currentIndex = 0;
        
        this.displayImage(this.currentIndex);
    },
    
    displayImage : function(index)
    {
 if(this.items.length > 0)
 {
     this.getLayout().setActiveItem(index);
 }
    }
})

[niallobrien]

I don't think Sencha will port this component to Classic, so I'd be inclined to try to create a custom component, perhaps integrating Ken Wheeler's Slick carousel jQuery plugin, as I mentioned.