Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable dragging in Carousel

Tags:

sencha-touch

Is it possible to disable usage of dragging to swap between Carousel panels? I want use just indicator.

like image 208
Egor4eg Avatar asked Nov 27 '11 02:11

Egor4eg


People also ask

How do I disable mouse drag on Owl carousel?

owlCarousel({ slideSpeed : 500, singleItem : true, pagination : false, autoPlay : false, afterMove : slideChanged, startDragging : pauseOnDragging, touchDrag : false, mouseDrag : false });

How do I reinitialize my carousel owl?

You can initialize the carousel and store it in a variable and using that variable you can refresh the owl carousel. like the below example. var $owlCarousel = $('. owl-carousel').


2 Answers

Just throwing this out there for the Sencha Touch 2.0 people. The above solution doesn't work for Sencha Touch 2.0, but there is a pretty easy work around.

Ext.define('Ext.LockableCarousel', {
    extend: 'Ext.Carousel',
    id: 'WelcomeCarousel',
    initialize: function () {
       this.onDragOrig = this.onDrag;
       this.onDrag = function (e) { if(!this.locked){this.onDragOrig(e);} }
    },
    locked: false,
    lock: function () { this.locked = true; },
    unlock: function () { this.locked = false; }
});

This will function exactly like a carousel, except now you can call .lock and .unlock on it. So you could do something like:

Ext.Viewport.add(Ext.create('Ext.LockableCarousel', { 
     id: 'LockableCarousel',
     fullscreen: true,
     hidden: false,
     items: [
        {
           html : 'Item 1',
           style: 'background-color: #5E99CC'
        },
        {
           html : '<a href="#" onclick="Ext.getCmp(\'LockableCarousel\').lock();">Lock</a><br /><a href="#" onclick="Ext.getCmp(\'LockableCarousel\').unlock();">Unlock</a>',
           style: 'background-color: #759E60'
        }
     ]
}));
like image 123
jtymann Avatar answered Nov 15 '22 06:11

jtymann


Try override afterRender method in Carousel;(I removed drag events on childs method)

   afterRender : function() {
        Ext.Carousel.superclass.afterRender.call(this);
        this.mon(this.body, {
        direction : this.direction,
        scope : this
        });
        this.el.addCls(this.baseCls + "-" + this.direction)
    }

Whole code;

 this.car =  new Ext.Carousel({
                ui       : 'light',
                items: [
                {
                        html: '<p>Carousels can be vertical and given a ui of "light" or "dark".</p>',
                        cls : 'card card1'
                    },
                    {
                        html: 'Card #2',
                        cls : 'card card2'
                    },
                    {
                        html: 'Card #3',
                        cls : 'card card3'
                    }],
                        afterRender : function() {
                            Ext.Carousel.superclass.afterRender.call(this);
                            this.mon(this.body, {
                                direction : this.direction,
                                scope : this
                            });
                            this.el.addCls(this.baseCls + "-" + this.direction)
                        }
        });
like image 39
Yusuf K. Avatar answered Nov 15 '22 05:11

Yusuf K.