Mini Carousel

As featured on: California State Portal

Instructions

Zip File Includes:

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

Copy the contents of the css, images and javascript folders to the corresponding folders of your site.

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.

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>

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

0 Comments

Submit a Comment