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

1. You will first need to create a Linked image group.

To make a Linked image group:

Go to Common content> images> image groups

Right click, insert > Linked image group

2. You must then right click and insert>linked image 

3. You can then add properties to your linked image, such as Title, add an image, adding a target URL.
It is possible to browse images to add.

4. From the Experience Editor, in a placeholder press the 'add here' insert option


5. Select 'Feature slider' by navigating to 'Renderings>Building blocks>Navigation>Feature slider'

 You can then point this to your Linked image group

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