Thank you
At first we would like to say thank you for choosing Master Slider WordPress plugin. In this documentation you will find everything you need to use Master Slider WordPress.
If you have any questions which are not covered in this documentation, please take a look at support section.
About the Master Slider WordPress
Master Slider WordPress is a premium high quality designed image and content slider for WordPress, with super smooth hardware accelerated transitions. It supports touch navigation with pure swipe gesture that you have never experienced before. It’s a truly responsive and device friendly slider which works perfect in all major devices. Master Slider is an awesome layer slider as well, with the ability of adding any HTML contents (texts, images, …) in layers. It is easy to use, plus there are ready to use templates available for you. You almost have everything in Master slider which is the most complete among the best, hotspots, thumbnails, variety of effects, Video support and much more.
Master Slider developer documentation
There is another version of Master Slider documentation specially for developers which you can find Developer Documentation here.
Installing by WP plugin installer
- Extract the zip file which you've downloaded from CodeCanyon.
- Navigate to
Plugins
> Add New
page in your WordPress admin.
- Click on the
Upload
button on the top.
- Click on
Choose File
and choose "masterslider-installable.zip" file from extracted zip file. then hit the Install Now
button.
- WordPress may ask you to enter your FTP details. After entering hit the
Proceed
.
- Now you should see "Master Slider WP" in plugins list. Click on the
Activate Plugin
to activate Master Slider WP.
Also WordPress codex contains instructions on how to do this here.
Note In this method the server that hosts your website should allow upload limits greater than 6 MB. Most hosting providers have only up to 2MB file upload limit.
In this case you need to upload the theme by FTP or contact your host provider to increase upload limit.
Installing by FTP
First, you need a tool for uploading plugin files to your site, you can use filemanager from cPanel or any FTP clients. Some good FTP clients :
- Extract the zip file which you've downloaded from CodeCanyon.
- Open extracted folder and extract "masterslider-installable.zip" file, after extract you should see "masterslider" folder.
- Connect to you server by FTP application then navigate to
/wp-content/plugins/
.
- Upload the "masterslider" folder which extracted.
- Login to your WordPress admin area and navigate to the
Plugins
page, then click the Activate
below Master Slider WP.
Server Minimum Requirements
- WordPress 3.6 or greater
- PHP version 5.2.4 or greater
- MySQL version 5.0 or greater
Manual update
Go to your CodeCanyon account and in download page, re-download the plugin ( updates are free of charge ).
Once you've downloaded the most recent version, you can deactivate and remove the old version, then install the new one. Your sliders, contents and settings are all safe in the database, removing the plugin won't touch them. The new version always has backwards compatibility, so you don't have to worry about anything.
Auto update
Activate the auto update simply by going to Master Slider settings and entering Your Envato Username
, Your Secret API Key
and Master Slider Purchase Code
on License Activation
tab.
Creating New Slider
- Login to your wordpress admin panel and click on
MasterSlider
link in admin sidebar menu.
- In Masterslider page click on
Create New Slider
button.
- Now a popup window will be open as shown in screenshot.
- Select slider type and press
CREATE
button.
- Your request will be proceed and you will be redirected to MasterSlider's panel page.
General Settings
- Slider name
- Specifies a name for your slider. It only used in admin area.
- Slider width
- Base width of slider in pixels, slider will resize layers and other elements under this value.
- Slider height
- Base height of slider in pixels.
Note Automatically crop and resize slider images based on above size if it is on.
- Slider sizing method
- The sizing method of slider, with this you can make slider
fullscreen
or fullwidth
even if it does not supported in your theme, it also supports boxed
and visible nearby slides
layouts.
- Auto-height Slider
- Whether the slider adapts its height to each slide height.
- Slider wrapper width
- It will set the wrapper width of slider (slider parent) if it leaves empty slider will set it automaticly (Slider uses this to align slider controls).
Slider Template and Transition
- Template
- Here by clicking on
Choose template
you can specify a template for your slider.
- Note Selecting template may overwrite some slider options and controls. If you want to have full control on options, select
Custom Template
.
- Transition
- Specifies the transition of changing slides in slider.
- Transition speed
- The speed amount of changing transition. Higher 50 values are not recommended.
- Direction
- Specifies slide changing direction, It may not supported by some templates.
- Slide space
- The spacing value between slides in pixels.
Slider Navigation and Preloading
- Slide show
- Enables the autoplay slideshow.
- Loop navigation
- Enables the continuous sliding mode.
- Pause at the end slide
- Whether the slider pauses slideshow when it reaches to last slide.
- Pause on hover
- Whether the slider temporary pause slideshow on mouse cursor moves over slider.
- Random order
- Whether using random slide ordering.
- Hide layers before changing slide
- Triggers hide transition of all layers just before changing slide. Only happens in slideshow slider.
- Show layers before slide transition complete
- Triggers show transition of next slide before slide transition complete.
- Start with slide
- Specifies the fist slide in slider.
-
Parallax mode
- Move while sliding/swiping
- It moves the layers while slider is sliding or swiping.
- Follow mouse
- It moves the layers while mouse is moving.
- Follow mouse over X-axis
- It moves the layers only on X-axis while mouse is moving (horizontally moves).
- Follow mouse over Y-axis
- It moves the layers only on Y-axis while mouse is moving (vertically moves).
- Disable
- It disable the parallax effect.
- Touch swipe navigation
- Whether the drag/swipe navigation is enabled.
- Mouse swipe navigation
- Whether the user can use mouse drag navigation.
- Use grab cursor
- Whether the slider uses grab mouse cursor while swiping with mouse.
-
- Mouse wheel
- Enables mouse scroll wheel navigation.
-
- Slide preloading
- Here you can specify that how slider loads images, it supports three different methods:
Load slides in sequence
, Load all slides before init
and Load nearby slides
which takes the number of current slide's nearby slides that should loads at a same time.
Slider Appearance
- Skin
- Here you can specify the skin of your slider.
- you can take a look at all skins here..
- Align center slider controls
- Whether the slider aligns UI controls to center. This option is only effective in full width mode.
- Background image
-
- Here you can choose a background image for the slider.
-
- Background color
- Specifies the background color of slider
-
- Class name
- Here you can add custom class names to the slider main element. Multiple class names must be separated by white space.
- Inline style
- Here you can add custom CSS style to slider main element. For example
border:solid 1px red;
Slide background and thumbnail
- Background
- Specifies current slide background.
- Fillmode
- Specifies the slide background scaling method.
- Thumbnail
-
- Here you can add a thumbnail for the slide. Please make sure that you have added
Thumblist
control to the slider or the selected template supports thumbs.-
Slide video background
- Video background paths
- Specifies the slide background video.You can use major video types like MP4, Ogg and webm.
- Video background fill mode
- You can choose the fill mode of the video size.
- Loop
- Turn on/off background video loop.
- Mute
- turn on/off background video sound.
- Pause video on slide changed
- It pauses video when slide change and continues playing when it goes back to slide video.
Slide video and link
Here you can add Youtube or Vimeo video as a video slide and also you can make link each slide of your slider.
- URL
- You can set a URL when user click on this slide it links to URL.
- Video embed src
- You can add Youtube and Vimeo src to create an slide for that video.
- Note To find YouTube/Viemo Embed URL you can Open the video in YouTube/Vimeo, play video and right-click on it, select "Copy embed code" then paste the embed code in a text editor, now you can see video embed URL in embed code which specified as iframe src.
Slide misc
Here you can add custom CSS class or id to each slide and also add alt attribute to slide background image.
- Class name
- you can add a CSS class to slide.
- CSS id
- you can add a CSS id to slide.
- Background color
- It will be used to add color to slide background.
- Alt text
- you can add an alt text attribute to the image in your background of slide.
Working with Layers
There are 4 types of layer in Master Slider
- Image
- You can add images in this type of layers.
- Text
- You can add texts in this type of layers.
- Video
- You can add Youtube and Vimeo videos in this type of layers.
- Hotspot
- You can add hotspots in this type of layers to show the related tooltip while mouse is over that hotspot, tooltip accepts html content as well as images in any sizes.
Adding new layers
To add layer in slide first you need to choose the layer type from the dropdown menu then press "+" button, the new layer will add in timeline and you can select it by clicking on its name.
Adding content to image layers
- Select image
- You can select the image to put in image layer.
- Alt text
- You can add text for alt attribute to have a better SEO.
- Link layer
- You can set a URL when user click on this image layer it links to URL.
Adding content to text layers
- Width
- You can set the width of text layer in pixel.
Note You need to enter your text on text editor.
Adding content to video layers
- Src
- You can set Youtube or Vimeo src here.
- Note To find YouTube/Viemo Embed URL you can Open the video in YouTube/Vimeo, play video and right-click on it, select "Copy embed code" then paste the embed code in a text editor, now you can see video embed URL in embed code which specified as iframe src.
- Width
- You can set the width of video layer in pixel.
- Height
- You can set the height of video layer in pixel.
- Select image
- You can select the image to put as video cover. It shows when video hasn't played yet.
- Alt text
- You can add text for alt attribute to have a better SEO.
Adding content to hotspot layers
- Tooltip align
- You can select the place of tooltip on hotspot layer here.
- Tooltip max width
- You can set the max width of Tooltip here.
- Stay tooltip on mouse over it
- tooltip does not disappear when mouse is over it.
- Note Use text editor to add the content of hotspot layer such as image, text and etc.
Set layer position on slide
You can select each layer by clicking on that then you can set the place for layer simply by drag and drop.You can also use keyboard arrow keys for changing layer place to have a better control over it or use "shift" + "arrow keys" to have a better speed.
You can change the depth of layers simply by dragging layer name in list of layers in timeline.
- Align to stage
- Use them to align layer to top, left, bottom, right, middle and center of slide.
- Snapping
- If you turn it on, in short distances the layer snaps to near object such as other layers, borders of slide and etc.
- Zoom
- It zooms the stage to make positioning easier.
- Note Zoom is only to make positioning easier and doesn't have any effect on output.
Adding transition to layer
- Parallax effect level
- The Intensity of parallax effect, higher values makes the layer more sensitive. Negative values are allowed.
- Transition effect
- you can select transition effect for layer in/out or create a new transition on Transition Editor for your layer.
- Duration
- You can set the transition time for layer here, you can set it on timeline too, please take a look at Working with timeline for more information.
- Delay
- You can set the delay time for transition layer here, you can set it on timeline too, please take a look at Working with timeline for more information.
- Enable transition out
- You can enable/disable transition out for layer here.
- Waiting
- You can set the duration time between transition in and out for layer.
Styling layer
- Layer position origin
- Choose the origin of layer from its 9 place.
- OffsetX
- You can set the X position of layer.
- OffsetY
- You can set the Y position of layer.
- Select style for your layer
- You can select style for layer or create a new style on Style Editor for your layer.
- Resizable layer
- If you turn it on this layer size changes by changing the window size.
- Hide layer under width
- You can set a minimum width for slider and if it goes less than that width this layer will be invisible.
Layer misc
- CSS class name
- you can add a CSS class to layer.
- CSS id
- you can add a CSS id to layer.
- Title attribute
- You can add title attribute for better SEO.
- Rel attribute
- You can add title attribute for better SEO.
You can set duration of showing slide in autoplay mode.
Working with Timeline in preview mode.
In preview mode timeline starts playing and you can see the transitions of each layer on slide, you need to click on "Preview slide" to enter to preview mode.
Note Removing or editing layers is disabled in preview mode.
In preview mode you can have a powerful control over timeline playing by using indicator
. You can use indicator to pause this timeline whenever you want or use it for fast forward/backward on timeline by dragging indicator. You can exit from preview mode by clicking on "exit preview".
Note You can pause and resume timeline by pressing the button
on the left of "Exit preview".
Working with Style Editor
You can use style editor to style layers, you can create a new style or use preset styles, also save the custom style as a preset for using it in other slider and slides.
There is a lot of options for you to style your layer and apply them With the option of seeing changes in preview.
There is an option to use 600+ google font, adding custom CSS from "Custom style" tab and a lot more.
Note If you remove a style from preset list it will affect on other sliders that use this specific preset style as well and their style would be removed.
Note If you have a single line text we recommend you to turn off wordwrap.
Working with Transition Editor
You can create custom transition and apply or save them as a preset transition for future usage. Also you can see your transition with having control of moving forward/backward.
General transition options
You can create custom transition and apply or save them as a preset transition for future usage.
- Fade
- Whether fade your transition or not.
- Duration
- Specifies the time of transition in second.
- Ease function
- Specifies the ease function for your transition.
- OffsetX
- Specifies the translate over X-axis for the transition in pixel.
- OffsetY
- Specifies the translate over Y-axis for the transition in pixel.
- OffsetZ
- Specifies the translate over Z-axis for the transition in pixel.
Transition rotation
- 2D Rotate
- Specifies clockwise rotation at a given degree.
- Rotate X
- Specifies rotation over X-axis.
- Rotate Y
- Specifies rotation over Y-axis.
- Rotate Z
- Specifies rotation over Z-axis.
Transition scale
- Scale X
- Specifies the Scale of layer's width.
- Scale Y
- Specifies the Scale of layer's height.
- Skew X
- Specifies the Skew of layer along the X-axis.
- Skew Y
- Specifies the Skew of layer along the Y-axis.
Specifying transition origin
- Origin X
- Specifies the position of X-axis for layer in percentage.
- Origin Y
- Specifies the position of Y-axis for layer in percentage.
- Origin Z
- Specifies the position of Z-axis for layer in pixel.
Adding Slider Controls
You can select one type of controller from the dropdown menu and by clicking on
it will add to "Used control" list. You can customize each control type by clicking on that.
Arrows Control Options
You have the abilities of hiding arrows while mouse is out of slider, showing arrows over videoplayer and hiding arrows in specific size of windows and less than that.
Line Timer Control Options
You have the abilities of hiding line timer while mouse is out of slider, showing line timer over videoplayer and hiding line timer in specific size of windows and less than that.
- Align control
- Specifies the place of line timer.
- Line timer color
- Specifies the color of line timer.
- Line timer width
- Set the width of line timer.
Slide Info Control Options
You have the abilities of hiding slide info while mouse is out of slider, showing slide info over videoplayer and hiding slide info in specific size of windows and less than that. Also you can insert the slide info inside of slider.
- Align control
- Specifies the place of slide info.
- slide info margin
- Specifies the margin for slide info.
- slide info width
- Specifies the width for slide info in pixel.
- slide info height
- Specifies the height for slide info in pixel.
Bullets Control Options
You have the abilities of hiding bullets while mouse is out of slider, showing bullets over videoplayer and hiding bullets in specific size of windows and less than that.
- Align control
- Specifies the place of bullets.
- slide info margin
- Specifies the margin for bullets.
Circle Timer Control Options
You have the abilities of hiding circle timer while mouse is out of slider, showing circle timer over videoplayer and hiding circle timer in specific size of windows and less than that.
- Circle stroke
- Specifies the stroke of circle in pixel.
- Circle radius
- Specifies the radius of circle in pixel.
- Circle color
- Specifies the fill color of circle.
Scrollbar Control Options
You have the abilities of hiding Scrollbar while mouse is out of slider, showing Scrollbar over videoplayer and hiding Scrollbar in specific size of windows and less than that. Also you can insert the Scrollbar inside of slider.
- Scrollbar handle color
- Specifies the color for Scrollbar handle.
- Align control
- Specifies the place of Scrollbar.
- Scrollbar width
- Specifies the width for Scrollbar.
- Scrollbar margin
- Specifies the margin for Scrollbar.
Thumblist/Tabs Control Options
You have the abilities of hiding thumblist/tabs while mouse is out of slider, showing thumblist/tabs over videoplayer and hiding thumblist/tabs in specific size of windows and less than that. Also you can insert the thumblist/tabs inside of slider.
- Thumb background fill mode
- Specifies the background fill mode of thumblist/tabs.
- Align control
- Specifies the place of thumblist/tabs.
- Thumblist/Tabs margin
- Specifies the margin for thumblist/tabs.
- Appearance
- Choose thumblist or tabs.
- Thumblist/Tabs info width
- Specifies the width for thumblist/tabs in pixel.
- Thumblist/Tabs info height
- Specifies the height for thumblist/tabs in pixel.
- Space between thumbs/tabs
- Specifies the the space among thumbs in thumblist mode or tabs in tab mode.
Inserting the slider with shortcode
You can place your sliders into pages and posts with their shortcodes. You can find the shortcode for each slider in Master Slider admin page next to their names in the list view. To insert the slider, edit a page or post and insert its shortcode into the WordPress text editor.
Inserting the slider with the Master Slider WP widget
MasterSlider WP supports widgets, so you can place your slider in your front-end page just by a drag n' drop. To do that, navigate to the Appearance menu on your left sidebar and select "Widgets". Grab the MasterSlider WP Widget and drop it into one of your widget area.
Please note that some themes may not support a widget area what you need. In this case, you can create a new widget area by editing your theme files.
Calling the slider from your theme files
Because a slider can be an integral part of your site, you may want to place it into your theme files. There are some PHP function which you can call for example from the header.php file of your theme and it inserts your slider into your home page or certail other pages. Here they are :
Description
Displays MasterSlider based on the slider id passed to.
Usage :
<?php masterslider ( $slider_id ); ?>
OR
<?php echo get_masterslider ( $slider_id ); ?>
Parameters :
- $slider_id
- (int) The slider ID that can be found on the plugin page in the slider list view at the first table column.
- Default: Null
It is important when you want to insert a slider to check its ID on the MasterSlider WP slider list page. When you removes some sliders, their IDs won't be re-indexed and the sequence may broke up. This is important to keep persistent your sliders preventing unwanted changes on the already inserted ones.
Using Slider API and Callbacks
Here you can add or remove callback functions to the slider, first select one type of callback function from the dropdown menu and clicking on
to add it to slider. Each callback function is kind of event handler you can add your custom script in the function then slider will execute that when the event dispatches.
Also you can access to the slider api by using "api" variable.
Methods
var api = event.target;
api.index(); // returns current slide index.
api.count(); // returns total number of slides.
api.next(); // next slide.
api.previous(); // previous slide.
api.gotoSlide(4); // moves to 4th slide.
api.pause(); // pauses the slider timer.
api.resume(); // resumes the slider timer.
api.currentTime(); // returns the percentage of elapsed time.
api.destroy(); // removes the slider.
Properties
api.so // returns the object of slider options.
api.view // returns the slider transition object.
api.view.slideList // returns a array of all slides.
api.viwe.currentSlide // returns the current slide object.
Exporting Sliders:
- Navigate to MasterSlider admin page and click on
Import & Export
button.
- Now a popup window will be open as shown in screenshot.
- You can select specific sliders to export or select them all in one step and finally press export button.
- Your browser will download an export file containing your sliders once you hit the "Export" button.
- Keep this file at a secure location.
Importing Sliders:
- Use
Choose file
button to select the export file you previously downloaded and click the "Import" button. This will bring back your previously exported sliders immediately.
Note MasterSlider won't export the images used in your sliders. Moving sites to different servers should not affect the plugin in any way. However, if you only want to move sliders between sites you need to copy the used images from your /wp-content/uploads/
folder into the same folder on your new installation.
Slider Skins
Here you can find a list of available skins which included in dowload package.
You can change the slider skin by following these steps:
- Find and upload your preferred skin from "skins" folder.
-
Import "style.css" from the skin folder into your page like following:
<link rel="stylesheet" href="masterslider/skins/light-2/style.css" />
-
Specify skin class name to your slider element.
<!-- masterslider -->
<div class="master-slider ms-skin-light-2" id="masterslider">
<!-- slides goes here -->
</div>
<!-- end of masterslider -->
Skins:
|
Name |
Class Name |
 |
default |
ms-skin-default |
 |
Light 2 |
ms-skin-light-2 |
 |
Light 3 |
ms-skin-light-3 |
 |
Light 4 |
ms-skin-light-4 |
 |
Light 5 |
ms-skin-light-5 |
 |
Light 6 |
ms-skin-light-6 |
 |
Light 6 Round |
ms-skin-light-6 ms-skin-round |
 |
Contrast |
ms-skin-contrast |
 |
Black 1 |
ms-skin-black-1 |
 |
Black 2 |
ms-skin-black-2 |
 |
Black 2 Round |
ms-skin-black-2 ms-skin-round |
 |
Metro |
ms-skin-metro |
How to translate Master Slider in different languages?
-
Download Poedit
There are several apps available to help you with translating .PO files. PoEdit is a popular one, and it's available on every major platform. You can download it from here.
-
Start translating
Open the default masterslider.po
file from your /wp-content/plugins/masterslider/languages/
folder. When you save your work PoEdit will generate you a .MO file which will be needed to apply your work.
-
Name your files properly
WordPress recognizes your localization by a special formatting of file names. You will need to include the right language and country codes so it can identify what language is your work made for.
For example, a French localization would have the file names: masterslider-fr_FR.po
and masterslider-fr_FR.mo
. You must follow this syntax, including the dash, underscore, and lower- or uppercase letters.
-
Apply your localization
Copy your newly created .PO and .MO files into the /wp-content/plugins/masterslider/languages/
folder. WordPress should use them immediately if you named your files properly.
Also checkout More detailed article on translating WordPress plugins
I want to rate Master Slider
Please login to your CodeCanyon account and navigate to your Downloads page and rate item as shown below.
Thanks in advance!
Support
If you have any questions please follow these steps:
Why support forum?
- You can upload images and insert code with code-highlighting.
- It is organized and searchable (that makes support easier and faster)
Supporting our Items INCLUDES:
- Responding to questions or problems regarding our item and its features
- Fixing bugs and reported issues
- Providing updates to ensure compatibility with new software versions
Item support does NOT include:
- Customization and installation services
- Support for third party software and plug-ins
Important Note We CAN NOT provide support via email.
Please ask your support related questions only in our support forum.
Important Note For the fast troubleshooting, please send us detailed informations about the issue and make sure that you don't forget to send us your site url where you are using or want to use the item. Please note, that we cannot troubleshoot from screencast videos or screenshots.
Master Slider developer documentation
There is another version of Master Slider documentation specially for developers which you can find Developer Documentation here.