Upgrade your image slider on SharePoint

Your image slider is okay. But you’d like it better if it had a makeover (50 points to whoever can guess the commercial reference).

This post will show you how you can take your out-of-the-box content search web part slideshow from this:

to this:

This solution supports multi-line descriptions that don’t get cut off. It gets rid of that dreadful partially transparent overlay and gives you more of your photo uninhibited by messy design. It’s more modern, lighter and sure to impress. At the end, be sure to adjust the CSS to match your own color scheme and size needs.

You need:

• A classic/wiki page on which you’ll be placing the content query web part
• A new or existing picture library app for slideshow images (works best and makes it so we don’t need to modify mapped properties)
  

Note: If you already have a content search web part functioning as a slideshow, skip this first section

Creating a new slideshow via content search web part

1. Click in empty space in area of the page where you’d like to place the slideshow
2. From the ribbon menu, select “Insert” and “Web part”
   
3. Content rollup –> Content Search –> Add
   
4. Edit the web part
   
5. Click “Change query” and set “Select a query” to “recently changed items” so we’ll always be rotating through the most recent images
6. Set Restrict by app to “Specify a URL” and paste the URL of the image library which will hold the images used in the slideshow. Do not copy anything after the name of the library (no views)
   
   
7. Click “Refiners” and add the “Image” AND/OR “Picture” content type(s) to refiners
8. Click OK
   
9. Set properties to rotate through 4 or 5 images, Control to Slideshow and Item to Large Picture.
   
10. Click OK
11. Save the page

Giving the web part a makeover

1. Edit the page again, this time to add a script editor web part
   Note: you could also add the css to a new css file, save it somewhere and reference the URL in a Content Editor Web Part. Or if you have an existing CSS file running on the page, you can simply add this CSS to that file
   
2. Edit Web Part
   
3. Edit Snippet
   
4. Paste the following CSS into the script editor

   <style type="text/css">
   .cbs-largePictureContainer{
   padding-left:30px;
   padding-right:0px;
   padding-bottom:0px;
   }
   
   .cbs-largePictureImageContainer {
   width:410px;
   margin:0px;
   top:0px;
   }
   
   .cbs-Slideshow{
   width:410px;
   padding:0px 2px 120px 0px;
   border:0px solid #96005d;
   background:#ffffff;
   }
   
   .cbs-SlideshowItems{
   width:440px;
   top:0;
   }
   
   .cbs-largePictureDataOverlay{
   background:#ffffff;
   opacity:1.0;
   width:440px;
   left:0px;
   height:120px;
   }
   
   .cbs-largePictureDataContainer, .cbs-largePictureDataOverlay{
   position:absolute;
   top:230px;
   }
   
   .cbs-largePictureContainer, .cbs-largePictureContainer, .cbs-pictureOnTopImageContainer, .cbs-picture3LinesImageContainer, .cbs-largePictureImageContainer{
   position:inherit;
   }
   
   .cbs-largePictureDataContainer {
   width:385px;
   padding-left:0px;
   }
   
   a.cbs-largePictureLine1Link, h2.cbs-largePictureLine1, .cbs-Slideshow h2 {
   color:#96005d;
   font-weight:bold;
   font-size:1.25em;
   }
   
   .cbs-largePictureLine2 {
   color:#444;
   font-size:1.1em;
   }
   .cbs-largePictureLine2, .ms-noWrap{
   white-space:normal!important;
   overflow:visible!important;
   text-overflow:ellipses!important;
   }
   
   .cbs-largePictureContainer, .cbs-largePictureImageContainer {
   background:#ffffff;
   padding-bottom:20px;
   }
   
   .cbs-largePictureImg,.cbs-slideshowitems,.cbs-pictureimglink {
   display: block;
   margin-left: auto;
   margin-right: auto;
   border-bottom:4px solid #96005d;
   }
   
   .cbs-SlideshowPagingBar, .cbs-SlideshowPagingBarOverlay {
   top:5px;
   left:5px;
   height:200px;
   width:30px;
   }
   
   .cbs-SlideshowPagingLink-Active > span {
   background-color:#1f2844;
   }
   
   .cbs-SlideshowPagingLink-Active > span, .cbs-SlideshowPagingLink-Inactive > span{
   border:.1em solid #1f2844;
   display:block;
   float:left;
   width:9px;
   height:20px;
   }
   
   .cbs-SlideshowPagingLink-Active, .cbs-SlideshowPagingLink-Inactive, .cbs-SlideshowPaging-More{
   height:30px;
   }
   </style>

5. Click OK
6. Save/publish the page

And the most fun part? Start adjusting the colors, borders and sizes to match your existing branding/theme. Make it your own and have fun with it.