Carousel - globules-io/OGX.JS GitHub Wiki

OGX.JS provides another swipe component, OGX.Carousel. Unlike OGX.GridSwiper, OGX.Carousel expects a limited number of panels (or views) and is only swipeable horizontally.

Carousel + Dots

Stack

Extends

 Uxi, Touch, Bind

OML

Format

 {"selector:Carousel":{CONFIG}}

Example, create panels from OML sub nodes

  {"#selector:Carousel":{ 
       "id":"someid"     
       "index":0,        
       "node:OML":[
            {"default:Views.Dummy":{
                 "id":"viewA", 
                  "template":"Dummy", 
                  "data":{"word":"Panel 1"}
            }},
            {"default:Views.Dummy":{
                  "id":"viewB",
                  "template":"Dummy", 
                  "data":{"word":"Panel 2"}
            }},
            {"default:Views.Dummy":{
                  "id":"viewC",
                  "template":"Dummy", 
                  "data":{"word":"Panel 3"}
            }}                        
        ]            
  }}

Example, create panels from a list and a display 1.23.0+

  {"#selector:Carousel":{ 
       "id":"someid"     
       "index":0,        
       "list":[{"url":"http://..."}, {"url":"http://..."}, {url:"http://..."}],
       "display":{
            "template":"MyTemplate"
       }         
  }}

With, as MyTemplate

  <div class="image" style="background-image:url({{$url}})"></div>

Instantiate

 let config = {
      el: _STRING_, //Required, the HTML element
      views: _ARRAY_, //Requited, an array,
      drag:_BOOL_, //Optional, if the user can swipe between panels, default to true
      drag_left:_bOOL_, //Optional, if the user can swipe left between panels, default to true 
      drag_right:_bOOL_, //Optional, if the user can swipe right between panels, default to true 
      blur:_BOOL_, //Optional, defaults to true, if the component should blur views out of display,
      index:_INT_ //Optional, index to show at start,
      list:_ARRAY_, //Optional, a list to convert to OML nodes
      display:_DISPLAY_, //Optional, a display to convert list to OML nodes,
      displays:_DISPLAY_, //Optional, dynamic displays to convert list to OML nodes
 };

//from a Uxi
let carousel = this.create('Carousel', config);

//With OML from a Uxi
OGX.Object.render(this, {"#selector:Carousel":{}});

//from OGX.Object
let carousel = OGX.Object.create('Carousel', config);

Methods

To show/slide to a view, pass its position

 carousel.showPanel(_INT_, _ANIM_);

such as

 carousel.showPanel(3, true);

_ANIM_ defaults to true

To get the current displayed panel

 let current = carousel.val();

To show a panel given an index

 carousel.val(_INDEX_);

Being the same as

 carousel.showPanel(_INDEX_);

Show panel given index and trigger change

 carousel.val(_INDEX_, true);

To add a panel and render an OML node in it __node, __data, __show, __anim, __cb

 carousel.addNode(_OML_, _DATA_, _SHOW_, _ANIM_, _CALLBACK_);

_DATA_ is an optional object, _SHOW_ is a boolean to show or not after creation, _ANIM_ optional animation or boolean, _CALLBACK_ optional callback called when the panel has been rendered

To remove an OML node and its panel

 carousel.removeNode(_TYPE_, _ID_);

_TYPE_ is an optional type of node, _ID_ is the id of the node

To replace a node 1.31.0+

 carousel.replaceNode(_INDEX_, _OML_, _DATA_, _CALLBACK_);

To remove a panel and its node (if any)

 carousel.removePanel(_INDEX_, _BOOL_);

_BOOL_ is an optional boolean to indicate if the node should be destroyed (true) or detached (false).

To swap 2 panels given their index

 carousel.swapPanels(_INDEXA_, _INDEXB_);

To go to the previous panel 1.14.0+

 carousel.prev();

To go to the next panel 1.14.0+

 carousel.next();

To enable/disable or get current drag status

 carousel.drag(); //returns true or false depending if drag is enabled
 carousel.drag(true); //enables drag/swipe
 carousel.drag(false); //disables drag/swipe

To enable/disable dragging in one direction

carousel.dragRight(false); //Can't swipe/drag in the right direction
carousel.dragRight(true); //Can now drag in the right direction again
carousel.dragLeft(false); //Can't swipe/drag in the left direction
carousel.dragLeft(true); //Can now drag in the left  direction again

Note that drag must be enabled to use dragRight and dragLeft

To remove all panels/nodes

carousel.empty();

To render new children 1.11.0+

carousel.render(OML, DATA);

Binding

You can also bind the list of the carousel to a display that can contain oml, to dynamically set the content of the carousel.

 {"#selector:Carousel":{ 
       "id" : "someid"     
       "index" : 0,        
       "list" : [{...}, {...}, {...}],
       "as" : "item",
       "display" : {
            "oml" : {
                 "default:SomeView":{
                      "template:OSE":"{{&item.type}}"
                 }
             }
       }         
  }}

Events

 OGX.Carousel.READY    //Fires when the component is ready
 OGX.Carousel.CHANGE   //Fires when the user has swiped
 OGX.Carousel.ADDED    //Fires when a panel has been added via addNode and no callback has been passed
 OGX.Carousel.REMOVED  //Fires when a panel has been removed

Destroy

To destroy this component, do

 carousel.destroy();

Note that calling destroy will also remove/destroy any view from the app if the component was used to instantiate views.

⚠️ **GitHub.com Fallback** ⚠️