Configure Rotating Images

You can add rotating banner images to your WordPress pages simply by uploading your images to the media library, and inserting a bit of code to the HTML editor in WordPress. You will be able to control the speed of the rotating images, its size, and the order in which it displays by changing some of the variables within the code, noted in the steps below.

Steps

1. Before uploading the images for the rotating banner, resize them to the desired dimensions in an image editor (such as Photoshop) outside of WordPress. All images must be the same size (width/heigh in pixels). This is important for the banner to render properly. Upload the resized images to the Media Library.
2. Copy the following code and paste it into the page you want the rotating banner. Make sure you copy it all. Be sure to paste the code into the HTML editor, and not the Visual editor.
<div id="banner"><script src="http://www.bu.edu/nis/lib/jquery/crossslide.js" type="text/javascript"></script><script type="text/javascript">// <![CDATA[ jQuery(document).ready(function($) { $('#bannerimage').crossSlide({ sleep: 5, fade: 2, shuffle: 0 }, [ { src: '/tech/files/2009/10/image_example_1.jpg' }, { src: '/tech/files/2009/10/image_example_2.jpg' }, { src: '/tech/files/2009/10/image_example_3.jpg' }, { src: '/tech/files/2009/10/image_example_4.jpg' }, { src: '/tech/files/2009/10/image_example_5.jpg' } ]); }); // ]]></script> <div aria-labelledby="bannerimage" id="bannerimage" style="height: 300px; width: 500px;"><img src="http://www.bu.edu/tech/files/2009/10/image_example_1.jpg" alt="" /></div> </div>
3. Replace the sample image source URLs (src:'http://www.bu.edu/...) with the URLs to the images you uploaded to the Media Library. Keep in mind that this example uses five images in the rotating banner, but you can use any number of images in your banner.
4. Replace the second image URL (<img src="http://www.bu.edu/...) with the URL of the first image you want to display in the banner. Adjust the height and width to match the dimensions of the images that will be displayed in the banner.
5. You can adjust the speed of the banner rotation by changing the “sleep” value. In this example, the sleep value is 5, meaning that it will pause 5 seconds between changing images. The “fade” value refers to the time it takes (in seconds) to fade between one image and the next. This value can also be adjusted. You can make the banner display images in random order by changing the “shuffle” value to 1, otherwise, it will display the images in the order in which they are listed in the code.
6. Save the page