JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

CSS

.enyo-panels > * {
    background: #eee;
    border: 3px solid #fff;
}

JavaScript

enyo.kind({
    name: "ex.Panels",
    kind: "Panels",
    
    published: {
        maxIndex: -1
    },
    maxIndexChanged: function() {
        if(this.maxIndex >=0 && this.index > this.maxIndex) {
            this.set("index", this.maxIndex);
        }
    },
    clamp: function(inValue) {
        var l = this.maxIndex == -1? this.getPanels().length : this.maxIndex+1;
		if (this.wrap) {
			// FIXME: dragging makes assumptions about direction and from->start indexes.
			//return inValue < 0 ? l : (inValue > l ? 0 : inValue);
			inValue %= l;
			return (inValue < 0) ? inValue + l : inValue;
		} else {
			return Math.max(0, Math.min(inValue, l - 1));
		}
    }
});

new ex.Panels({
    arrangerKind: "CarouselArranger",
    maxIndex: 3,
    components: [
        {content:"first"},
        {content:"second"},
        {content:"third"},
        {content:"fourth"},
        {content:"fifth"},
        {content:"sixth"}
    ]
}).renderInto(document.body);