Apps and development tools - jQuery Plugins


Columnslider

This plugins provides a multi columns view that can be slided to left and right. The columns are slided in groups. An (optional) navigation toolbar is added automatically. The height of the slider is calculated as the height of the largest column.

Sliding can be done by "touch-swipe" on iOS devices if the additional jquery plugin "swipehandler" is included.

Includes

Static include:

<tml:include designdb="@afw" ref="include:jquery" o_jquery-plugins="columnslider[,swipehandler]"/>

Dynamic Include:

requirejs(["jquery-columnslider"], function(){...})

requirejs(["jquery-columnslider", "jquery-swipehandler"], function(){...})

HTML

<div id="myCols" class="column-slider">

  

  <div class="columns">

    <div class="column">

      .... col1 

    </div>

    <div class="column">

      .... col 2

    </div>

    ...

    <div class="column">

      .... col n

    </div>

  </div>


</div>

Usage

The slider is created via JavaScript as follows:

$("#myCols").columnslider(options)

Parameter "options" is an optional JavaScript object. Valid properties are

  • margin: define a margin bettween columns in pixel. Default: 10
  • cols: specify the number of columns slided in one group
  • hide_nav: specifies if navigation links are hidden. Default: false
  • effect: specifies the slide effect. Possible values are "fade" and "slide". Default: "slide"
  • autoslide: specified the number of milliseconds for auto sliding. Set to 0 for "no autoslide". Default: 0
  • singleStep: specifies if previous/next buttons should scoll a single column instead of a column-group. Default: false.

Responsive designs

In case of a responsive design the parameter "cols" may be specified as a JavaScript object with properies "small", "medium" and "large". Each property value defines the number of columns that should be shown in small, medium and large design. This requires WGA.responsive.getMediaWidth() as available in basic website kit layouts.

Sample:

$("#myCols").columnslider({

  cols: {

    small: 1,

    medium: 2,

    large: 3

  }

})

Events

  • slide: fired after columns are slided.

Sample:

$("#myCols").on("slide", function(){

  console.log("columns slided")

}).columnslider()