• Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy
Averta Support Center
  • Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy

Looking for the answer

Setting Up Sliders with jQuery Plugin


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.

Note: Before using this method, make sure that jQuery is already available in the page

Example

  $(function ($) {
    $('.slider').masterslider({
        width : 1000,
        height : 500,
        // other slider options here...
        controls: {
          arrows: { autohide:true },
          thumbnails: { autohide:false, dir:'h', align:'bottom' }
        }
    });
  });

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 jQuery plugin. You can set all slider options as the plugin’s first parameter.

In addition, to add a control, like the example, you need to define each UI control in the controls options as an object.

Access slider instance

If you need to get the slider instance object from the jQuery plugin, you can get it like this example:

  var slider =  $('.slider').masterslider('slider');

Adding events

You can also add slider events like other jQuery events. Below adds init event to the slider

  $('.slider').on( 'init', function(){
    // slider init.
  });

Adding actions

To add an action callback to the slider by jQuery plugin you can add it like the following example:

    $('.slider').masterslider( 'action', 'init', function(){
      // slider init
    });

Was this information helpful?

Submit
Wizard Home
Related articles list
Create New Support Ticket
Copyright © 2017 Averta. All rights reserved.