Procedure: Slide Show Creation
  
1.        Create Picture Library:
a.        Site Action > View All Site Content
                                     i.            Click Create
                                    ii.            Select Picture Library (use template "SlideShowFields," bellow Picture Library)
                                  iii.            Give a name (e.g. PIO-Slides-Library)
                                   iv.            Click Create
 
2.        Upload Images to Picture Library
a.        Site Action > View All Site Content
b.        Click PIO-Slides-Library
c.        Click Upload
d.        Click Upload Multiple Files…
[Note: Since the site width is 1000 pixels, make sure all images are in that same width.]
5.        Drag Files in
6.        Click OK
7.        Click Done
i.         Go to the page where Slides will be placed
                                     i.            Click Site Actions > Edit Page
                                    ii.            Click Insert Web Part
                                  iii.            Select Content Rollup (Categories)
                                   iv.            Select Content Query (Web Parts)
                                    v.            Click Add
                                   vi.            Click open the tool pane link
                                                      1.            Under Query, choose "Show items from the following list:" and browse for "PIO-Slides-Library"
                                                      2.            Content Type: COC Slider Group and COCSlider
                                                      3.            Filter: Start Date is less than or equal to Today
                                                      4.            Filter: End Date is greater than or equal to Today
                                                      5.            Sort items by: Sort-Order (ascending order)
                                                      6.            Group style: Default
                                                      7.            Item style: HomePage-Slider
                                                      8.            Fields to display:
a.        Link: Slider-Image-Link;
b.        Image: URL Path[Custom Columns];
c.        Title: Title;
d.        ImageUrlAltText: Title;
                                                      9.            Chrome Type: None
                                                   10.            Click OK
                                 vii.            Click Insert Web Part (install a 2nd web part)
                                viii.            Select Media and Content (Categories)
                                   ix.            Select Content Editor (Web Parts)
                                    x.            Click Add
                                   xi.            Click Click here to add new content
                                                      1.            Edit HTML Source
                                                      2.            Type in the followings
 
<style type="text/css">
@import url("/_layouts/Canyons/css/home.css");
@import url("/_layouts/Canyons/css/CanyonInner.css");
</style>
<script type="text/javascript" src="/_layouts/Canyons/js/jquery.min.js"></script>
<script type="text/javascript" src="/_layouts/Canyons/js/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>
 
c.        Edit Web Part
                   i.            Title: Slider JS & CSS
                  ii.            Chrome Type: None
                iii.            Click OK
a.        Click Save & Close to save the edited page
b.        Publish the page