How to Make an iTunes Slider on Your Website - Including Links

The slider in the iTunes software is pretty cool, and our graphic designer at work thought so too. He had us integrate the slider into the website we built for Peace Apostolic Community in Rockhampton.

I found a cool tutorial online at Tuts Plus that was able to give me a great start but the code was incomplete. I've modified the code a little and now you can add links so the slider will take you wherever you want to go.

The first part you need is the html code. It looks like this.

In the code you'll note that there are a few div tags - these are for styling in the css code. My itunes slider works with 5 images - although to adjust for more or less you will need to adjust the css that goes with the div tags.

Next you will need some css styling in your stylesheet, here is what I used.

#header {
/*border:1px solid white;*/
margin-top:11px;
width:100%;
height:282px;
/*background-color:#e6e6e4;*/
}

#gallery, #thumbs{
float: left;
}

#gallery{
width: 713px;
height: 282px;
overflow: hidden;
/*border:1px solid #E6E6E4;*/
}

#gallery img{
position: absolute;
}

#thumbs{
width: 187px;
height: 280px;
overflow: hidden;
padding:0px;
margin:0px;
border-bottom:1px solid #E6E6E4;
border-top:1px solid #E6E6E4;
}

#thumbs img {
border:0px solid #e6e6e4;
padding:0px;
margin:-1px 0px 1px 0px;
}

a:link img {
margin:0px;
padding:0px;
border:0px thin #e6e6e4;
spacing:0px;
}

#next{
display: block;
width: 20px;
height: 20px;
background: url(images/arrow.png);
background-repeat:no-repeat;
position: relative;
top: 260px;
left: 800px;
}

#next:hover{
background: url(images/arrowmo.png);
}

Now that you have html and css to make the images appear on the page - you need javascript to make it slide - and here it is. Much thanks to netplus for the majority of this code - and the remainder of the coding is mine.

Please use my itunes slider - if you like it and it works for me, please link to this website as a courtesy.

Add new comment

Full HTML

  • Lines and paragraphs break automatically.
  • You may post PHP code. You should include <?php ?> tags.
  • Web page addresses and e-mail addresses turn into links automatically.

Filtered HTML

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You may post PHP code. You should include <?php ?> tags.
  • Web page addresses and e-mail addresses turn into links automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.