{"title":"Creating a simple slider in quick steps","id":50359,"link":"https:\/\/env.averta.net\/en\/step\/creating-a-simple-slider-in-quick-steps\/","parent":[50579],"content":"<p>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.<br \/>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong>Don&#8217;t have time to create the slider by yourself? We have included many ready-to-use sample sliders in the <a href=\"https:\/\/env.averta.net\/en\/step\/creating-a-simple-slider-in-quick-steps\/?b=,\" title=\"Creating a simple slider in quick steps\">download package<\/a>, plus you can use <a href=\"https:\/\/env.averta.net\/en\/step\/creating-a-simple-slider-in-quick-steps\/?b=,\" title=\"Creating a simple slider in quick steps\">Visual Builder tool<\/a> too.<\/p>\n<h2>Step 1: Importing assets<\/h2>\n<p>Create a folder beside the page and name it <code>masterslider<\/code>?then in the download package &gt; <code>dist<\/code>? you can find two folders named <code>js<\/code>?and <code>css<\/code>?, copy\/upload both folders to the?folder that you have created. Now you need to import the assets into HTML.<\/p>\n<p><strong>Slider styles<\/strong><\/p>\n<p>Add following code inside the <code>head<\/code>?element in the page, it imports slider main styles and all skins:<\/p>\n<pre class=\"lang:css decode:true \">&lt;link rel=\"stylesheet\" href=\"masterslider\/css\/styles-all.css\" \/&gt;<\/pre>\n<p><strong>Slider script<\/strong><\/p>\n<p>Add following code inside the <code>head<\/code>?or end of <code>body<\/code>?element. It contains the slider main script and all addons.<\/p>\n<pre>&lt;script src=\"masterslider\/js\/masterslider-all.js&gt;&lt;\/script&gt;<\/pre>\n<h2>Step 2: The slider markup<\/h2>\n<p>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 <code>body<\/code>. If your page is blank just add it at the begining of the `body` element.<\/p>\n<pre>\r\n\/\/ sample markup here...\r\n<\/pre>\n<h2>Step 3: Setup the slider<\/h2>\n<p>The last step is setting up the slider with the slider setup method, following snippet setups the slider with thumbnail:<\/p>\n<pre>\r\n\/\/ setup sample here...\r\n<\/pre>\n<p>Now you can save the changes and see the result in the browser. As always, we recommend Chrome!<\/p>\n<h2>Whats next?<\/h2>\n<p>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<ul>\n<li>You can check the list of all options in here.<\/li>\n<li>Check out the slide contents and options here.<\/li>\n<li>Find all available UI controls and add them to the slider.<\/li>\n<\/ul>\n","type":"solution"}