Feature slider

A way to group and view related content

Overview

The feature slider allows a set of related content to be displayed in a grouped place. Items that don't fit on the screen can be scrolled or swiped into view.

It's a great way to show other news and features, or related products, at the end of an article.

Example
WCMS use

Gather the images you need for your slider

You need two for each item in the feature slider – a hero image and a thumbnail image. Make sure all the hero images for your slider are the same dimensions. All of the thumbnail images need to be the same dimensions as each other too. Save the images in the Media Library in the hero-images folder.

Create your destination page (optional)

If your feature item will be pointing to a page on Sitecore, build that page if it doesn’t already exist.

Create the new slider

A slider consists of an image group item with multiple linked image items. Each linked image item represents one item in the slider.

Go to Common content> images> image groups

Right click on Image groups and selectinsert > Linked image group

Give your group a name. Move the group to the appropriate topic-related sub-folder.

To add a linked image item to your group, right click on the group and select insert > linked image 

Give your image a sensible name.

Fill in the following attributes: 

  • Title – this will be the text that appears over the top of the image in the slider.
  • Caption (optional) – this is subtext that appears underneath the title
  • Image – this is the hero image your prepared earlier
  • Target URL – this is the page that the linked image will open when it’s selected. It can be a Sitecore page, or an external link
  • Thumbnail – the thumbnail image you selected earlier

Save your changes.

To create another linked image, follow the same process or duplicate the one you’ve just created.

Fast track all of your linked images and your image group.

Add the feature slider to a web page

In Experience Editor, click in an available rendering slot and press ‘Add here’.

Navigate to Renderings > Building blocks > Navigation > Feature slider and press the Select button. 

Select your new image group from the list displayed. 

Save your changes and fast track your page.

Adding items to an existing feature slider

Locate the image group in common content - common-content > images > image groups. Duplicate an existing linked image and change its attributes as required. Save and fast track the new image. If you want your new image to be the first one in the feature slider, move it to the top of the list of images.

Republish your image group using the Publish > Publish > Publish item method. 

Example Feature sliders

Hampshire Music service news and events feature slider

  • Hero images need to be 1000 x 500px and thumbnails 240 x 240px. Give the images the same name as you will give the associated page, with either -1000 or -240 at the end of the name
  • When creating news article pages to go with the feature slider, you will need to provide a Published on date. If the news article refers to an event that’s being held on a specific day, use that date. If the news article refers to an ongoing event, use the date that you publish the article on
MVC.net use
Code

<div class="bx-viewport has-next" style="width: 100%; overflow: hidden; position: relative;"><ul class="row bxslider thumbnail-block" style="width: 515%; position: relative; transform: translate3d(0px, 0px, 0px); transition-duration: 0s;">
            <li class="three columns alpha add-bottom" style="list-style: none; width: 248px; float: left; position: relative;">
                <a class="thumbnail" href="http://blogs.hants.gov.uk/libraries/christmas-opening-hours-2/">
                

                <h3>Christmas and New Year opening hours</h3>
                <p class="remove-all">Find out our library opening hours throughout the festive season</p>
                </a>

            </li>
            <li class="three columns alpha add-bottom" style="list-style: none; width: 248px; float: left; position: relative;">
                <a class="thumbnail" href="/library/aboutus/visionandstrategy">
                <img width="640" height="320" alt="Transformation strategy to 2020" src="/-/media/hero-images/transformation-strategy-640.jpg?h=320&la=en&w=640&hash=C8C5613E129C29B15025AF63F6DEA49B58D4D578">

                <h3>Transformation strategy to 2020</h3>
                <p class="remove-all">The revised version of the Strategy is now available</p>
                </a>

            </li>
            <li class="three columns alpha add-bottom" style="list-style: none; width: 248px; float: left; position: relative;">
                <a class="thumbnail" href="http://blogs.hants.gov.uk/libraries/get-cosy-with-a-christmas-read-2/">
                

                <h3>Christmas Reads</h3>
                <p class="remove-all">Get in the festive spirit with our reading list</p>
                </a>

            </li>
    </ul></div> 
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release