1. Download Nivo Slider – http://dev7studios.com/nivo-slider/
2. Upload the css files and js files to yourtheme/ folder css under css folder and jquery.nivo.slider.js under js folder
3. Add nivoslider css to yourtheme/templates/Page.ss file:

   <% require themedCSS(nivo-slider) %>

4. Add HomePage.php to mysite/code folder using code:

   <?php
   class HomePage extends Page
   {
   static $has_many = array (
    'Slides' => 'Slide'
   );
   public function getCMSFields()
   {
    $f = parent::getCMSFields();
    $manager = new DataObjectManager(
    $this, // Controller
    'Slides', 
    'Slide',
   array(
    'Slidename' => 'Slidename'
   ), 
   'getCMSFields_forPopup' 
   ); 
   $f->addFieldToTab('Root.Content.Main', $manager);
   return $f; 
   	}
   
   }
   class HomePage_Controller extends Page_Controller
   {
   function show(){ 
    return array(); 
   } 
   function Slide(){ 
         if(isset($this->request) && $this->request->param('ID')){ 
            return DataObject::get_by_id('Slide', (int)$this->request->param('ID')); 
         }    
      }
   }
   ?>

5. Add Slide.php to Mysite/code folder with code:

   <?php
   class Slide extends DataObject
   {
   	static $db = array ( 
   	'Slidename' => 'Text',
   	); 
   	static $has_one = array ( 
   	'Slider' => 'Slider',
   	'Photo' => 'Image'
   	); 
   	public function getCMSFields_forPopup()
   	{
   	return new FieldSet( 
   		new TextField('Slidename', 'Slide name'),
   		new FileIFrameField('Photo', 'Photo') 
   		);
   	}
   }
   ?>

6. Add Slider and js to Yourtheme/templates/Layout/HomePage.ss:

   <div id="slider">
   	<% control Slides %>
   		$Photo.Setwidth(900) // width is set to:900px
   	<% end_control %>
   </div>
   <script type="text/javascript" src="themes/yourthemename/js/jquery-1.9.0.min.js"></script>
   <script type="text/javascript" src="themes/yourthemename/js/jquery.nivo.slider.js"></script>
   <script type="text/javascript">
   $(window).load(function() {
    $('#slider').nivoSlider({
    effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
    slices: 15, // For slice animations
    boxCols: 8, // For box animations
    boxRows: 4, // For box animations
    animSpeed: 500, // Slide transition speed
    pauseTime: 6000, // How long each slide will show
    startSlide: 0, // Set starting Slide (0 index)
    directionNav: true, // Next & Prev navigation
    controlNav: false, // 1,2,3... navigation
    controlNavThumbs: false, // Use thumbnails for Control Nav
    pauseOnHover: true, // Stop animation while hovering
    manualAdvance: false, // Force manual transitions
    prevText: 'Prev', // Prev directionNav text
    nextText: 'Next', // Next directionNav text
    randomStart: false, // Start on a random slide
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
    });
   });
   </script>

7. Build database and flush using yoursitename.com/dev/build?flush=all
8. Required modules Dataobjectmanager and Uploadify

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