Why use image/banner rotator or slider on the homepage? Because it is a very effective method to increase the website usability and engage visitors. At the same time an image slider would call attention to an area of the website, your products, services or offerings, spicing up an otherwise dull webpage.

In this tutorial I will show you how to deploy a jQuery-based image slider on your SharePoint website powered by a custom Content Query Web Part and a picture library.

I decided to use FlexSlider as my homepage image slider because of seven reasons (among many). It is free, easy to use, responsive – adjusting beautifully to any screen size, jQuery based, support major browsers, custom navigation and touch swipe sensitive making a perfect pick for tablets and other mobile devices.

To keep this tutorial as simple as possible, I will use our freely available Responsive SharePoint theme to integrate the slider on the home page fed by Content Query Web Part. All the necessary files are available in the package. Assuming you’ve already implemented the Responsive SharePoint theme and everything works seamlessly we’re ready to dig in.

As you noticed the FlexSlider on the home page is hardcoded and the markup was provided in the home.htm along with the boxes used on the home page.

So, under your js folder you will need to have two JavaScript files: jquery.flexslider.js and jquery.min.js

First we need to create our slider content type.

On your homepage go to “Site Action” >> “Site Settings” >> Galleries >> Click on “Site content type”. Click on the Create link and on the next screen give your new content type a name. For the sake of consistency, I would recommend you use the same naming convention. Call the new content type MySlider, under Parent Content Type select “Digital Asset Content Types” and “Image”. Next, create a new content type group called “HomePage Slider CT” and hit OK.

Now, we need to create the slider image link column that holds the link when your click on the image. So, go back to your homepage and go to “Site Action” >> “Site Settings” >> Galleries >> Click on “Site columns” and click on the Create link. On the next page give the column a name, “Slider-Image-Link”, pick the type on the column: “Hyperlink or Picture”, create a new column group called “MySlider-Column”, set the format as Hyperlink and click OK.

Now, it is time to add the “Slider-Image-Link” column to MySlider content type. Back on the homepage go to “Site Action” >> “Site Settings” >> Galleries >> Click on “Site content type” and look for and click MySlider content type under “HomePage Slider CT” group. On the MySlider content type page click on “Add from existing site columns” link. On the next page select “HomePage Slider CT” group from the dropdown list, add your “Slider-Image-Link” column and click OK.

Now, that we’ve created the necessary content type and site column, it is time to create the slider picture library.
Go to homepage >> Site Settings >> View All Site Content >> click Create >>select Picture Library, give it a name, “My-Slides-Library” and click Create. Once the picture library is created let’s assign our “HomePage Slider CT” content type to it. Click on the Settings >> Picture Library Settings.

In the General Settings area, click on the “Advanced settings” link and next select Yes for “Allow management of content types?” and click OK.

Back in “My-Slides-Library” settings page, select “Add from existing site content types link”. On the next page select “HomePage Slider CT” group from the dropdown list, add MySlider to the list and click OK. Back in “My-Slides-Library” settings page click on the Picture content type and next “Delete this content type” under settings so the only content type available for “My-Slides-Library” is MySlider.

Since you’re still in the “My-Slides-Library” settings page, let’s create three more necessary columns that will handle the start/expiration dates for each image in the slider as well as the sorting order. These three new columns are optional but I’m very confident you will be very happy to have them. It will make your slider even more powerful by allowing you to set starting dates or expiration dates for your ads on the slider as well as an image sort capability.

So, under Columns create two new columns called Start-Date and End-Date. Assign them “Date and Time” type, “Date Only”, set the default value to “Today’s Date” and click OK. For the sorting column, create a new column called Sort-Order, set it as Number type, “Enforce unique values”, set the Min allowed value to 1 and Max to 99 and Default value to 99. Once done start uploading the images for the slider.

Now it time to add the slider to the home page. Go to Site Settings >> Edit Page. On the Header zone, click “Add a Web Part” and under Content Rollup select Content Query and then click Add.

Open the tool pane for the newly content query web part. Under Query choose “Show items from the following list:” and browse for “MySlidesLibrary”. Set the Content Type for “HomePage Slider CT” and MySlider. Setup the filters starting with the Start-Date (is less than or equal to) Today and End-Date (is greater than or equal to) Today.

For the Grouping and Sorting setup the Sort-Order in ascending order and for the “Fields to display” set the Link to “Slider-Image-Link;”, Image to “URL Path [Custom Columns];” and Title to “Title;”. Under Appearance give your web part a title, “MySlider” and set the Chrome Type to None, click OK and save the page.

If you save the page you will see there is more work to be done. At this time you will see all the images on the slider, that is because we didn’t set up the slider markup.

Feed Image Slider from CQWP – Part 2