Is it possible to disable usage of dragging to swap between Carousel panels? I want use just indicator.
owlCarousel({ slideSpeed : 500, singleItem : true, pagination : false, autoPlay : false, afterMove : slideChanged, startDragging : pauseOnDragging, touchDrag : false, mouseDrag : false });
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').
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'
}
]
}));
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)
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With