Results 1 to 7 of 7

Thread: Need an Image Carousel

  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cypress, Kalifornia
    Posts
    285
    Answers
    10

    Default Answered: Need an Image Carousel

    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

  2. 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.

  3. #2
    Sencha User
    Join Date
    Nov 2012
    Posts
    432
    Answers
    11

    Default

    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

  4. #3

    Default

    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/

  5. #4
    Sencha User
    Join Date
    Nov 2012
    Posts
    432
    Answers
    11

    Default

    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]

  6. #5
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cypress, Kalifornia
    Posts
    285
    Answers
    10

    Default wait until Classic

    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.

  7. #6
    Sencha Premium User
    Join Date
    Sep 2016
    Posts
    14
    Answers
    2

    Default

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

    Code:
    //
    //  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);
     }
        }
    })

  8. #7

    Default

    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.

Similar Threads

  1. Replies: 1
    Last Post: 1 Dec 2016, 12:10 PM
  2. how to swipe carousel under a top right image and left image
    By tstext in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 7 Jan 2014, 10:51 PM
  3. How to show default image in the carousel while image sliding in the same carousel?
    By Rameshlamani in forum Sencha Touch 2.x: Discussion
    Replies: 3
    Last Post: 5 Jan 2013, 5:45 PM
  4. Carousel with image snippet/trying to center image...
    By jaypompano in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 11 Aug 2011, 9:45 AM
  5. Image carousel
    By Bleak in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 10 Mar 2011, 5:52 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •