Mini Carousel

As featured on:

• California State Portal

View Sample

Instructions

1. Download the Minicarousel (zip)

Zip file includes:

• minicarousel.html
• instructions_minicarousel.txt
• CSS folder (1 file)
• Images folder (12 files)
• JavaScript folder (1 file)

2. Copy the contents of the css, images and javascript folders to the corresponding folders of your site.
3. Copy the HTML code from minicarousel.html to your webpage where you want the carousel to appear.
   Customize the links and images with your own.
4. Copy these lines to the head of your webpages. They should appear after the link to scripts.js.
   
   <link rel="stylesheet" href="/css/minicarousel.css" media="screen, projection, print, tv" type="text/css" />
   <script type="text/javascript" src="/javascript/minicarousel.js"></script>

Question?

1. How do I change the number of images?

   • Change the width setting within the CSS file "/css/minicarousel.css":

     .javascript_on #carousel_images {
     width:300px; /* 50 * number of visible icons */

   • Change the following within the JavaScript file "/javascript/minicarousel.js":

     var miniCarousel = {
     widthOfEachImg:50, // width of each image, including padding
     totalNumberOfImgs:12,
     numberOfVisibleImgs:6, // number of images to show at a time
     speed:20, // speed, number of pixels to move each cycle