Abstract

Wms scroller is jquery and div tag base scroller. It is a multiscroller means that a single page can operate multiple sliders without any additional scripting language. Following section we will elaborate how to attach wms-scroller in the web page.

WMS Scroller source directory outlook

How it works

WMS scroller can be wrapped with html div tag. Following jquery script need be attached in html page to initialize the WMS scroller.

$(document).ready(function() {
$(“#view_one”).wmsSCROLL({
autoScrollingMode: “always”, // mandatory
autoScrollingDirection: “endlessLoopRight”, // mandatory
autoScrollingStep: 1, // mandatory
autoScrollingInterval: 30, // mandatory
manualContinuousScrolling: true, // mandatory
touchScrolling: true, //mandatory
scrollWidth:1000, // default 600px
scrollHeight:400, // default //360px
//***** viewer button control ****
btnControl:true,
btnVideo :true,
videoLink:”2017-01-30_14.57.35_505432.mp4″,
btnViewer:true,
viewerLink:”http://pyramidenkogel.it-wms.com/”,
mouseZooming: true,
});

JQuery parameter settings

This scroller is basically focused on two effects such as:

• Continuous scroll effect
• Pendulum effect

Continuous effect, such as mobile touch screen applications. As follows:

To achieve this effect, follow the necessary parameter setting are mandatory

autoScrollingMode: “always”, // mandatory
(Note: This setting perform auto scroll when page is loaded. It is a mandatory setting. Otherwise scroller may note work)
autoScrollingDirection: “endlessLoopRight”, // mandatory
(Note: scroll continuous direction. It could be “endlessLoopRight”, “endlessLoopLeft” )
autoScrollingStep: 1, // mandatory
autoScrollingInterval: 30, // mandatory
Note: How fast or slow scrolling duration. Higher value will slowdown and lower value
increase scrolling speed.
manualContinuousScrolling: true, // mandatory
Note: Must set to true otherwise scroller loop will not join multiple layer div tag.
touchScrolling: true, //mandatory
Note: If true scroll will response in touch effect.
scrollWidth:1000, // default //600px
scrollHeight:400, // default //360px
Note: This scroller is responsive. It is also adjustable mean you can set width and height
of the scroller.

Download full manual from here:

download