Carousel Web Part

There are two carousel web parts enclosed in this package:

  1. Carousel for Full Width Layout - to be used for page layouts without side navigation (quick launch) or sidebar.
  2. Carousel for Layout with Sidebar - to be used for page layouts with side navigation (quick launch) or sidebar.

Modifying Carousel Content

The carousel slider is strictly based on carousel bootstrap. It is recommended that, as a starting point you will download one of our images that we use within the carousel. It will help you get started in setting the dimensions of your images for the carousel.

*IMPORTANT:
All images used within carousel should have the same dimensions 1618 pixels x 450 pixels.

To save an image to your device:
  1. In your browser right click on any image used within the carousel, and save it to your preferred folder.
  2. Next, open the saved image in Photoshop and use it as a canvas size for your images.
  3. After your images are ready to use, upload them to your preferred location.
Next, you need to modify the carousel source code:
  1. Add the carousel web part to your page.
  2. In edit page mode, click Edit Web Part -> click on the image shown in the carousel web part, and then select Edit Source in the ribbon area. This will open the source code of the carousel.
  3. Under section <!-- Wrapper for slides --> provide changes for images highlighted in yellow, captions highlighted in blue, and buttons highlighted in green. For captions keep the text no longer than shown below:

     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
     <div class="item active">
     <img width="100%" height="100%" alt="Alternate Text" src="https://sharepointpackages.com/images/images-MT_WP/carousel/MT_Carousel_006.jpg" data-themekey="#"/> 
     <div class="container"> 
     <div class="carousel-caption carousel-caption-center"> 
     <h1>Cutting Edge Themes</h1> 
     <p class="lead">Spice up your SharePoint applications with cutting edge MT themes for SharePoint 2013 and Offic​e 365.</p> 
     <a class="btn" role="button" href="http://www.sharepointpackages.com/index.php?main_page=index&amp;cPath=78" target="_blank">Get Themes</a></div> 
     </div> 
     </div>
    
     <div class="item"> 
     <div class="item">
     <img width="100%" height="100%" alt="Alternate Text" src="https://sharepointpackages.com/images/images-MT_WP/carousel/MT_Carousel_001.jpg" data-themekey="#"/>&#160;</div> 
     <div class="container"> 
     <div class="carousel-caption carousel-caption-left"> 
     <h1>Layouts and Web Parts</h1> 
     <p class="lead">Get the predefined MT Layouts, web parts, and color palettes to quickly and effectively manage your SharePoint content.</p> 
     <a class="btn" role="button" href="http://www.sharepointpackages.com/index.php?main_page=page&amp;id=52" target="_blank">Review Contents</a></div> 
     </div> 
     </div>
    
     <div class="item"> 
     <div class="item">
     <img width="100%" height="100%" alt="Alternate Text" src="https://sharepointpackages.com/images/images-MT_WP/carousel/MT_Carousel_007.jpg" data-themekey="#"/>
     </div> 
     <div class="container"> 
     <div class="carousel-caption carousel-caption-right"> 
     <h1>SharePoint Templates</h1> 
     <p class="lead">Get the clean-cut MT templates you need to deliver compelling and attractive SharePoint sites.</p> 
     <a class="btn" role="button" href="http://www.sharepointpackages.com/" target="_blank">Browse Templates</a></div> 
     </div> 
     </div

    More information on setting the carousel bootstrap can be found online.