Carousel

Overview

The Carousel is an image-led component to showcase new or featured content. It is typically used on a service homepage or other landing page, and should take up a full-width slot.

Carousels can contain 3 or 4 images.

Example
WCMS use

Image requirements

Your main images should be 640x320 pixels in size, ideally with important details to the left and centre.
Your small thumbnail images should be about 100x100 pixels square - no smaller.

If you have not built a group of images / URLs to populate the carousel component you will need to do this prior to adding a carousel item to the page. 

1.In the content editor navigate to 
Common Content > Images > Image Groups.  Right click Image Groups and insert a LinkedImageGroup Template (renaming as appropriate).




2.In the content tree, right click your new LinkedImageGroup and insert a LinkedImage.  The carousel must contain a minimum of 3 images up to a maximum of 4. 




3.Populate the following fields, uploading your main image and thumbnail images where appropriate.

Title
Caption
Image
Target URL
and thumbnail


Complete this process for each of your 3 – 4 LinkedImage items.



Adding your images to the page

1. From the Experience Editor, in a placeholder press the 'add here' insert option
2.Browse Renderings > Building Blocks > Images > Carousel
3.Select the required carousel LinkedImageGroup

 

 

4.The completed carousel will appear in the placeholder.  It may be necessary to save the page to ensure the carousel item fully renders. 

 

 

MVC.net use
Code

<div class="row scale-images carousel">
    <a href="">
                        <div class="eight columns alpha omega overlay-image" >
                                    <div class="caption bottom">
                <h3></h3>
                <p class=""></p>
            </div>
                        </div>
            </a>
    <ul class="remove-sides four columns alpha omega remove-top">
                        <li class="row remove-bottom">
                                    <a data-image-src="" class="thumbnail clearfix" href="">
                                                <span class="one-third column alpha indicator">
                                                            <img height="100" width="100" alt="" src="">
                                                </span>
                                                <aside class="two-thirds column omega">
                                                            <h3></h3>
                                                            <p class="offscreen"></p>
                                                </aside>
                                    </a>
                        </li>  
                        <li class="row remove-bottom">
                                    <a data-image-src="" class="thumbnail clearfix" href="">
                                                <span class="one-third column alpha indicator">
                                                            <img height="100" width="100" alt="" src="">
                                                </span>
                                                <aside class="two-thirds column omega">
                                                            <h3></h3>
                                                            <p class="offscreen"></p>
                                                </aside>
                                    </a>
   

Version and status
  • current version
  • Concept