It to be more like an image slider. There are some coding after the project was complete jQuery plugin.

Example 1

Each slide is 600 x 270 pixels. I've set the width of the accordion to 960 and the slideWidth to 600. The size of the tabs will be calculated automatically. This is probably the best way to fire the accordion.

$(document).ready(function() {
 $("#example1").zAccordion({
  timeout: 4000,
  slideWidth: 600,
  width: 960,
  height: 270
 });
});

Example 2

Each slide is 500 x 220 pixels. I've set the width of the accordion to 780 and the tabWidth to 150. The size of the slides will be calculated automatically.

The starting slide is set to 1 (the second slide of slides 0, 1, and 2). The accordion does not auto play. I've also set the accordion to trigger on mouseover.

$(document).ready(function() {
 $("#example2").zAccordion({
  startingSlide: 1,
  auto: false,
  speed: 100,
  tabWidth: 150,
  width: 780,
  height: 220
 });
});

Example 3

This is probably the most practical example. Each slide has its own class and custom background image. I've set the text inside each of the slides to display only for the class with the open slide. I've also customized the slide class names. The JavaScript and CSS are below:

$(document).ready(function() {
 var accordion = $("#example3").zAccordion({
  slideWidth: 600,
  width: 900,
  height: 350,
  timeout: 3000,
  slideClass: "frame",
  slideOpenClass: "frame-open",
  slideClosedClass: "frame-closed",
  easing: "easeOutCirc"
 });
 $("#thumbs .thumb-0").click(function(){
  accordion.start();
  return false;
 });
 $("#thumbs .thumb-1").click(function(){
  accordion.click(0);
  return false;
 });
 $("#thumbs .thumb-2").click(function(){
  accordion.click(1);
  return false;
 });
 $("#thumbs .thumb-3").click(function(){
  accordion.click(2);
  return false;
 });
 $("#thumbs .thumb-4").click(function(){
  accordion.click(3);
  return false;
 });
 $("#thumbs .thumb-5").click(function(){
  accordion.stop();
  return false;
 });
});

#example3 ul {list-style:none;}
#example3 h3 {color:#fff;text-transform:uppercase;font-size:24px;}
#example3 p {color:#fff;}
#example3 .frame-1 {background:url(images/slide1.gif) top left repeat;}
#example3 .frame-2 {background:url(images/slide2.gif) top left repeat;}
#example3 .frame-3 {background:url(images/slide3.gif) top left repeat;}
#example3 .frame-4 {background:url(images/slide4.gif) top left repeat;}
#example3 .frame-content {width:360px;padding:100px 120px;}
#example3 .frame-closed .frame-content {display:none;}
#example3 .frame-open .frame-content {display:block;}