{"title":"Creating a Simple Slider","id":51876,"link":"https:\/\/env.averta.net\/en\/step\/creating-a-simple-slider\/","parent":[51821],"content":"

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.<\/p>\n

Note: <\/strong>Do not have time to create a slider by yourself? We have included many ready-to-use sample sliders in the download package<\/a>, plus you can use Visual Builder tool<\/a>, too.<\/p>\n

Step 1: Importing assets<\/h2>\n

Create a folder beside the page and name it?masterslider<\/code>. Then in the download package >?dist<\/code>? you can find two folders named?js<\/code>?and?css<\/code>, copy\/upload both folders to the?folder that you have created. Now you need to import the assets into HTML.<\/p>\n

Slider styles<\/strong><\/p>\n

Add following code inside the?head<\/code>?element in the page to import main styles of the slider and all skins:<\/p>\n

<link rel=\"stylesheet\" href=\"masterslider\/css\/styles-all.css\" \/><\/pre>\n
Slider script<\/strong><\/p>\n
Add following code inside the?head<\/code>?or end of?body<\/code>?element. It contains the slider main script and all addons.<\/p>\n
&lt;script src=\"masterslider\/js\/masterslider-all.js&gt;&lt;\/script&gt;<\/pre>\n
Step 2: The slider markup<\/h2>\n
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<\/code>. If your page is blank, just add it at the beginning of the body<\/code> element.<\/p>\n
\/\/ sample markup here...\r\n<\/pre>\n
Step 3: Setup the slider<\/h2>\n
The last step is setting up the slider with the slider setup method, following snippet setups the slider with thumbnail:<\/p>\n
\/\/ setup sample here...\r\n<\/pre>\n
Now you can save the changes and see the result in the browser. As always, we recommend Chrome!<\/p>\n
What’s next?<\/h2>\n
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.<\/p>\n