Here you can find out how to create a simple slider with Master Slider in quick 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: Don’t have time to create the 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, it imports slider main styles 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 begining 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!
Whats 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 the list of all options in here.
- Check out the slide contents and options here.
- Find all available UI controls and add them to the slider.