With thumbnails: http://www.ecu.edu/cs-training/hallwa/Content-Slider.cfm
Without thumbnails: http://www.ecu.edu/cs-training/hallwa/content-slider-new-renderhandler.cfm
Creating a banner using "Content Slider" can be done in five (5) steps:
We have had the Content Slider custom element for a couple of years now and most recently we have created a render handler that allows you to cycle captioned images without the thumbnails (see examples above).
To create a banner using "Content Slider" follow these five (5) steps:
Step 1: Upload your images to your CustomCF folder found in your Subsite Tools. Make sure you create a separate folder only for these images. In the image below the folder is named "testslider." All photos in this folder will be used in the element. If you get stuck try our tutorial on uploading files to your CustomCF.
Step 2: From your template insert a new element and define this element as "Content Slider" found under "Custom Elements."
Step 3: Define the data fields for the element by clicking on the gear icon, selecting "New Data" and completing the data parameters. The first field is the number of images you are displaying. Next you will type the name of the folder you uploaded to CustomCF. To produce the banner without thumbnails set "Left Width" to 960 (or full page width) and "Right Width" to 0. These numbers are the width in pixels (what is a pixel?) of each part of the element. By setting "Right Width" to 0 you are telling CommonSpot you do not want the right side--which contains the thumbnails. Set the border to 0 and set the number of second you want each picture to display. If you want the thumbnails to appear try setting each width to half the full page width (e.g., "Left Width" and "Right Width" both 480 pixels and the boarder at 0)
Step 4: Now it is time to caption your images. Choose the tabs at the top of the element data box to caption each image. Tab one should be used for the first image in the file, tab two for image two and so on. It may be helpful to write down to order the images appear in your CustomCF folder to properly label each image. Once completed click "Save."
Step 5: Now for the last, but most important step. If you are creating a banner without thumbnails you will need to change the render handler from default to "Thumbnailless." If you are keeping the thumbnails, you do not have to change the handler, however you must make sure your element doesn't exceed the page width. You can change the handler by clicking on the "gear icon" from earlier, selecting more and clicking "Custom Render Handlers." The menu will appear with the "Thumbnailless" option. And that's it! Now you can make a clean-cut and powerful banner for your pages.
If you ever would like to change the captions or any of the data in the element you can do this easily by clicking on the "gear icon" and clicking "Data" instead of "New Data."
You've heard the saying a picture is worth a thousand words, right? While an image can be one of the most impacting additions to your website, there are some things to keep in mind when working with web images. Images that appear in a banner should be of high resolution and quality. The clearer your images the more professional your site will become. It may not be a bad idea to review this helpful post on web images. Image Resolution and how it effects your webpage.