Skip to main content

System Status: 

Image Rotator – Images and Links

Find out how to implement an image rotator on your website that links the images to pages.

Use the following code to implement an image rotator on your website that links the images to pages inside or outside your site.

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 three-column template.

  • Images should each 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.


screenshot of students cheering with image rotator controls

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"/></a></li>
<li><a href="link"><img src="_images/img-2.jpg"/></a></li>
<li><a href="link"><img src="_images/img-3.jpg"/></a></li>
</ul>
<div class="flex-controls"></div>
</div>