{"title":"Setting Up Sliders with jQuery Plugin","id":51886,"link":"https:\/\/env.averta.net\/en\/step\/setting-up-sliders-with-jquery-plugin\/","parent":[51824],"content":"

Although you can use Master Slider without jQuery, it is possible to setup the slider like any other jQuery plugins. In this article you can find an example of setting up the slider with its jQuery plugin.<\/p>\n

Note: <\/strong>Before using this method, make sure that jQuery is already available in the page<\/p>\n

Example<\/h2>\n
  $(function ($) {\r\n    $('.slider').masterslider({\r\n        width : 1000,\r\n        height : 500,\r\n        \/\/ other slider options here...\r\n        controls: {\r\n          arrows: { autohide:true },\r\n          thumbnails: { autohide:false, dir:'h', align:'bottom' }\r\n        }\r\n    });\r\n  });<\/pre>\n
As it demonstrates in the example above, to create a slider with the jQuery plugin, first of all, you need to select all slider markups in the page by jQuery, then call masterslider<\/code> jQuery plugin. You can set all slider options as the plugin’s first parameter.<\/p>\n
In addition, to add a control, like the example, you need to define each UI control in the controls<\/code> options as an object.<\/p>\n
Access slider instance<\/h2>\n
If you need to get the slider instance object from the jQuery plugin, you can get it like this example:<\/p>\n
  var slider =  $('.slider').masterslider('slider');\r\n<\/pre>\n
Adding events<\/h2>\n
You can also add slider events like other jQuery events. Below adds init event to the slider<\/p>\n
  $('.slider').on( 'init', function(){\r\n    \/\/ slider init.\r\n  });<\/pre>\n
Adding actions<\/h2>\n
To add an action<\/a> callback to the slider by jQuery plugin you can add it like the following example:<\/p>\n
    $('.slider').masterslider( 'action', 'init', function(){\r\n      \/\/ slider init\r\n    });<\/pre>\n","type":"solution"}