How to add an image slider

Applies to: T4 Site Manager
Last updated: 20/10/2014
Summary: How to create or edit an image slider on a homepage. Also known as an image carousel, or image banner (if static).

Before you start

  • Sliders should only be used on homepages and only when there is a marketing requirement.
  • Please contact us before creating a slider - sliders need to be activated by the Web Editor team.
  • Do not use more than four slides per slider.

Choose the right images

  • Images should be high quality, sharp and not overly detailed or busy
  • For a slider with text block, crop the image to 600px wide x 300px high
  • For a slider without text block, crop the image to 600px wide x 250px high
  • Save all images as .jpg files
  • Avoid over-compressing images, around 60-70% JPEG compression works well for most photographs

Please also refer to our guidelines on How to prepare images and How to use images

Types of slider

Slider with text block

  • Each slide includes a 600px x 300px image with its own block of text to the right.
  • If you intend to use columns underneath the slider, add <div class="layout-container"> after the slider.
  • The slider fits across the whole width of the page and should not be used within a grid_8 column.
  • If you only include one slide, the script will not be applied and your page will have a single static image and text block.

Outstanding expertise

The faculty is recognised as a Centre for Excellence in Teaching and Learning, giving students a firm grounding in basic science that is so valued by the biomedical sciences.

Impact

Our research is informed by a clear vision to address some of the biggest challenges facing human and animal health and welfare, with studies ranging from molecular and cellular mechanisms to whole organisms.

Faculty on film

Our collection of online videos explore the experiences of some of our students and showcase our research.

Creative science

The annual Art of Science Competition allows researchers to show their creative side and share their work with the public.

<div class="slider-base bg-b-red">
<div class="slide"><img src="http://placehold.it/600x300" alt="" />
<div class="slide-text">
<h2><a href="#">Outstanding expertise</a></h2>
<p>The <a href="#">faculty</a> is recognised as a Centre for Excellence in Teaching and Learning, giving students a firm grounding in basic science that is so valued by the biomedical sciences.</p>
</div>
</div>
<div class="slide"><img src="http://placehold.it/600x300" alt="" />
<div class="slide-text">
<h2><a href="#">Impact</a></h2>
<p>Our research is informed by a clear vision to address some of the biggest challenges facing human and animal health and welfare, with studies ranging from molecular and cellular mechanisms to whole organisms.</p>
</div>
</div>
<div class="slide"><img src="http://placehold.it/600x300" alt="" />
<div class="slide-text">
<h2><a href="#">Faculty on film</a></h2>
<p>Our <a href="#">collection of online videos</a> explore the experiences of some of our students and showcase our research.</p>
</div>
</div>
<div class="slide"><img src="http://placehold.it/600x300" alt="" />
<div class="slide-text">
<h2><a href="#">Creative science</a></h2>
<p>The annual <a href="#">Art of Science Competition</a> allows researchers to show their creative side and share their work with the public.</p>
</div>
</div>
</div>

After inserting images, you may find a gap beneath each image when previewing the page. To remove the gap, open the page in HTML view and remove any instances of &zwnj; or &zwnj;<br /> from the code. Note: the <br /> may sometimes be on the line below the &zwnj; but you will still need to remove it. This is a known issue, for more details see How to fix known issues.

  • In the text block, use an <h2> heading followed by a paragraph of no more than 30 words/190 characters.
  • For links, use the heading and/or image and inline links within the paragraph. Do not use buttons in the text block.
  • Use <div class="slider-base bg-b-red"> to specify the background colour of the text block - in this case bright red. You could use the partner colour to the main colour scheme or choose a contrasting colour from the bright or dark palette:

Dark colours

  • bg-d-aqua
  • bg-d-blue
  • bg-d-purple
  • bg-d-pink
  • bg-d-red
  • bg-d-yellow
  • bg-d-lime
  • bg-d-green

Bright colours

  • bg-b-aqua
  • bg-b-blue
  • bg-b-pink
  • bg-b-red
  • bg-b-yellow
  • bg-d-aqua
  • bg-b-lime
  • bg-b-green

Slider with static text block

  • As above, but with a single static text block which stays the same for each of the slide images.

Static text block

This text stays the same as the slide images change.

<div class="slider-base bg-b-green">
<div class="slide"><img src="http://placehold.it/600x300" alt="" /></div>
<div class="slide"><img src="http://placehold.it/600x300" alt="" /></div>
<div class="slide"><img src="http://placehold.it/600x300" alt="" /></div>
<div class="slide-text">
<h2><a href="#">Static text block</a></h2>
<p>This text stays the same as the slide images change.</p>
</div>
</div>

After inserting images, you may find a gap beneath each image when previewing the page. To remove the gap, open the page in HTML view and remove any instances of &zwnj; or &zwnj;<br /> from the code. Note: the <br /> may sometimes be on the line below the &zwnj; but you will still need to remove it. This is a known issue, for more details see How to fix known issues.

Slider without text block

  • Each slide includes a 600x250 image with a caption overlaying the bottom of each image.
  • The slider should only be used within a grid_8 column.
  • Use data-cycle-desc="Put your image caption here, keep it short" within the slide div's to add a caption to each slide (see code below).
Children’s Burns Research Centre
Reducing the risk of burns in the home
Most burns in children are caused by hot drinks
Improving first-aid knowledge amongst parents

Related content

Related content would sit here, next to slider.

<div class="slider-base slider-no-slide-text">
<div class="slide" data-cycle-desc="Children’s Burns Research Centre">
<img src="http://www.bristol.ac.uk/social-community-medicine/media/childrens-burns/images/home/hp-happy-child2.jpg" alt="" />
</div>
<div class="slide" data-cycle-desc="Reducing the risk of burns in the home">
<img src="http://www.bristol.ac.uk/social-community-medicine/media/childrens-burns/images/home/hp-parent-cooking2.jpg" alt="" />
</div>
<div class="slide" data-cycle-desc="Most burns in children are caused by hot drinks">
<img src="http://www.bristol.ac.uk/social-community-medicine/media/childrens-burns/images/home/hp-child-tea2.jpg" alt="" />
</div>
<div class="slide" data-cycle-desc="Improving first-aid knowledge amongst parents">
<img src="http://www.bristol.ac.uk/social-community-medicine/media/childrens-burns/images/home/hp-cooling-hands2.jpg" alt="" />
</div>
</div>

After inserting images, you may find a gap beneath each image when previewing the page. To remove the gap, open the page in HTML view and remove any instances of &zwnj; or &zwnj;<br /> from the code. Note: the <br /> may sometimes be on the line below the &zwnj; but you will still need to remove it. This is a known issue, for more details see How to fix known issues.