Silverstripe 3.1 Siteconfig and Masterslider Part 2

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/ 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/ 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'>
<link href="{$ThemeDir}/masterslider/skins/black-2/style.css" rel='stylesheet' type='text/css'>
<link href="{$ThemeDir}/masterslider/skins/contrast/style.css" rel='stylesheet' type='text/css'>
<link href="{$ThemeDir}/masterslider/skins/light-2/style.css" rel='stylesheet' type='text/css'>
<link href="{$ThemeDir}/masterslider/skins/light-3/style.css" rel='stylesheet' type='text/css'>
<link href="{$ThemeDir}/masterslider/skins/light-4/style.css" rel='stylesheet' type='text/css'>
<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
         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
         loop:true, // if false the slider ends run after last slide
         autoplay:true // if false the slider changes if you swipe or use arrows and bullets
    // adds Arrows navigation control to the slider.

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!

Tags: , , , , , , | Posted under SilverStripe CMS | RSS 2.0

Author Spotlight

Teet Bergmann

I'm a freelance web designer from Estonia. Mostly doing sites using Silverstripe, magento, prestashop, wordpress.

Leave a Reply

Your email address will not be published. Required fields are marked *