Last updated: 20/10/2014
<div class="layout-container">
after the slider.grid_8
column.<div class="slider-base bg-b-red">
<div class="slide"><img src="https://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="https://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="https://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="https://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>
<h2>
heading followed by a paragraph of no more than 30 words/190 characters.<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:bg-d-aqua
bg-d-blue
bg-d-purple
bg-d-pink
bg-d-red
bg-d-yellow
bg-d-lime
bg-d-green
bg-b-aqua
bg-b-blue
bg-b-pink
bg-b-red
bg-b-yellow
bg-d-aqua
bg-b-lime
bg-b-green
<div class="slider-base bg-b-green">
<div class="slide"><img src="https://placehold.it/600x300" alt="" /></div>
<div class="slide"><img src="https://placehold.it/600x300" alt="" /></div>
<div class="slide"><img src="https://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>
grid_8
column.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).<div class="slider-base slider-no-slide-text">
<div class="slide" data-cycle-desc="Children’s Burns Research Centre">
<img src="https://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="https://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="https://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="https://www.bristol.ac.uk/social-community-medicine/media/childrens-burns/images/home/hp-cooling-hands2.jpg" alt="" />
</div>
</div>