Image Rotator – Linked Images and Text
Last Updated: August 26, 2020 8:57:10 AM PDT
Give feedback
Find out how to implement an image rotator on your website that links the images to pages and provides an area for text under the picture.
Use the following code to implement an image rotator on your website that links the images to pages and provides an area for text under the picture.
Note: This code does not work on CMS Version 5 sites. It has been replaced with the image rotator module.
Prerequisites
The example below shows this working in the center column of the 3 column template.
- Images should all be the same height and width.
- Optimal width and height is 540px by 280px.
Example Screenshot
Note that since Blink is now a CMS Version 5 site, this image rotator code does not work on Blink.
How to Implement
Insert the following code into the page, substituting the image path in the appropriate location:
<div class="flexslider">
<ul class="slides">
<li><a href="link"><img src="_images/img-1.jpg"/>
<p class="flex-caption">Caption1</p></a></li>
<li><a href="link"><img src="_images/img-2.jpg"/>
<p class="flex-caption">Caption2</p></a></li>
<li><a href="link"><img src="_images/img-3.jpg"/>
<p class="flex-caption">Caption 3</p></a></li>
</ul>
<div class="flex-controls"></div>
</div>