Here you can find out how to create a simple slider with Master Slider quickly in few steps. The final result will be a slider that only contains images and thumbnails which is a good starter sample for adding more contents and customizing by following the documentation.
Note: Do not have time to create a slider by yourself? We have included many ready-to-use sample sliders in the download package, plus you can use Visual Builder tool, too.
Step 1: Importing assets
Create a folder beside the page and name it?masterslider. Then in the download package >?dist? you can find two folders named?js?and?css, copy/upload both folders to the?folder that you have created. Now you need to import the assets into HTML.
Slider styles
Add following code inside the?head?element in the page to import main styles of the slider and all skins:
<link rel="stylesheet" href="masterslider/css/styles-all.css" />
Slider script
Add following code inside the?head?or end of?body?element. It contains the slider main script and all addons.
<script src="masterslider/js/masterslider-all.js></script>
Step 2: The slider markup
Now you need to add the slider markup to the page. it defines the slider main element, slides and thumbnails. You can add it inside any section of the?body. If your page is blank, just add it at the beginning of the body element.
// sample markup here...
Step 3: Setup the slider
The last step is setting up the slider with the slider setup method, following snippet setups the slider with thumbnail:
// setup sample here...
Now you can save the changes and see the result in the browser. As always, we recommend Chrome!
What’s next?
After completing the above steps, now you have a very simple example of Master Slider which you are able to customize it to achieve what you desire.
- You can check out the list of all options here.
- Check out the slide contents and options here.
- Find all available UI controls and add them to the slider.