In this part the masterslide series, we will upload the files needed for masterslider and also I will show you how to edit the themes/yourtheme/templates/Page.ss to change the slider theme.

1.Download Master Slider jquery or go buy the pro version for more themes and stuff in codecanyon.

2. Extract the files and upload them to folder named masterslider under themes/yourtheme/ folder

3. Now lets choose from the free themes the one you want to use for that you need to change the themes/yourtheme/templates/Page.ss line:

//Find this line
<link href="{$ThemeDir}/masterslider/skins/default/style.css" rel='stylesheet' type='text/css'>

//And Change it to
<link href="{$ThemeDir}/masterslider/skins/black-1/style.css" rel='stylesheet' type='text/css'>
//or
<link href="{$ThemeDir}/masterslider/skins/black-2/style.css" rel='stylesheet' type='text/css'>
//or
<link href="{$ThemeDir}/masterslider/skins/contrast/style.css" rel='stylesheet' type='text/css'>
//or
<link href="{$ThemeDir}/masterslider/skins/light-2/style.css" rel='stylesheet' type='text/css'>
//or
<link href="{$ThemeDir}/masterslider/skins/light-3/style.css" rel='stylesheet' type='text/css'>
//or
<link href="{$ThemeDir}/masterslider/skins/light-4/style.css" rel='stylesheet' type='text/css'>
//or
<link href="{$ThemeDir}/masterslider/skins/metro/style.css" rel='stylesheet' type='text/css'>

4. Refresh after save to see the changes.

5. Now lets change the width and height of the slider or use it fullwidth for that i will add the lines what is what for the script part from last tutorial:

<script type="text/javascript">
(function ( $ ) {
"use strict";
$(function () {
	var slider = new MasterSlider();
	slider.setup('masterslider' , {
         width:1100,    // slider standard width
         height:350,   // slider standard height
         view:"fade",  //Different views like basic, fade, mask etc.
         overPause:false, // if true and you are over the slider with mouse the slider will pause until you move mose away from it
         space:2,
         start:1,
         fullwidth:true, // if false the slider will take the size what is written in width and height, If true it will use arrows in that standard size
         grabCursor:true,
         swipe:true,
         mouse:true,
         loop:true, // if false the slider ends run after last slide
         preload:0,
         autoplay:true // if false the slider changes if you swipe or use arrows and bullets
    });
    // adds Arrows navigation control to the slider.
    slider.control('arrows');
    slider.control('bullets');
});
})(jQuery);
</script>

For documentation visit mastersliders homepage.

In last  3th part i will tell you how to use the admin part of masterslider.

Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!