CODEWITHSUNDEEP
sencha-touchsencha-touch-2carouselswipe
Vahid
Vahid

Reputation: 3442

Sencha Touch 2 Carousel: Lock Swiping of Start/End Page

I want Carousel to stop swiping at start and end of the pages.
I mean to prevent the end page to swipe to the right and the start page to swipe to the left:

Carousel

Is there any config or some other way to implement it?

Thank you in Advance.

Upvotes: 1

Views: 1561

Answers (2)

ashishmohite
ashishmohite

Reputation: 1120

You can create your own carousel and then override the onDrag event following is the code form Ext.carousel.Carousel

Ext.define('Ext.carousel.Custom', {
    extend: 'Ext.carousel.Carousel',

    onDrag: function(e) {
        if (!this.isDragging) {
            return;
        }

        var startOffset = this.dragStartOffset,
            direction = this.getDirection(),
            delta = direction === 'horizontal' ? e.deltaX : e.deltaY,
            lastOffset = this.offset,
            flickStartTime = this.flickStartTime,
            dragDirection = this.dragDirection,
            now = Ext.Date.now(),
            currentActiveIndex = this.getActiveIndex(),
            maxIndex = this.getMaxItemIndex(),
            lastDragDirection = dragDirection,
            offset;

        if ((currentActiveIndex === 0 && delta > 0) || (currentActiveIndex === maxIndex && delta < 0)) {
            delta *= 0.5;
        }

        offset = startOffset + delta;

        if (offset > lastOffset) {
            dragDirection = 1;
        }
        else if (offset < lastOffset) {
            dragDirection = -1;
        }

        if (dragDirection !== lastDragDirection || (now - flickStartTime) > 300) {
            this.flickStartOffset = lastOffset;
            this.flickStartTime = now;
        }

        this.dragDirection = dragDirection;

        // now that we have the dragDirection, we should use that to check if there
        // is an item to drag to
        if ((dragDirection == 1 && currentActiveIndex == 0) || (dragDirection == -1 && currentActiveIndex == maxIndex)) {
            return;
        }

        this.setOffset(offset);
    }
});

reference :=Link

Upvotes: 1

Saurabh Gokhale
Saurabh Gokhale

Reputation: 46415

By default, ST2's carousel component has this configuration. So, you need not put in any extra effort to achieve this.

Look at this example from Sencha's website. When you reach the last item, it will prevent swiping to the right and when you are on first item, it will prevent swiping to the left.

Ext.create('Ext.Carousel', {
    fullscreen: true,

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            html : 'Item 1',
            style: 'background-color: #5E99CC'
        },
        {
            html : 'Item 2',
            style: 'background-color: #759E60'
        },
        {
            html : 'Item 3'
        }
    ]
});

Upvotes: 1

Related Questions