Image Carousel Code

[Sam]

Hi all,

I'm not sure if I'm posting this in the relevant section, but I don't suppose anyone could help me out with the image carousel that you find on many websites. An example would be this:



This is from the website of: www.sydneybuses.info/

The coding I have found so far indicates the following, but everytime I try to use this it doesn't work and uses all the images together at the same time, rather than individually.

<div class="portletCarouselWrapper">





<div class="carousel">



<!-- "previous page" action -->
<a class="prev browse" title="Previous item"><span>Previous item</span></a>

<div class="scrollable" rel="7000">
<div class="items">


<div class="tileItem visualIEFloatFix">

<div class="itemPadding">


<center>
<a href="http://www.sydneybuses.info/news/south-eastern-suburbs-bus-timetable-changes-from-sunday-18-march">
<img src="http://www.sydneybuses.info/banners/south-eastern-suburbs-timetables-18-march-2012/leadImage" alt="South Eastern Suburbs timetables 18 March 2012" title="South Eastern Suburbs timetables 18 March 2012" height="130" width="520" />
</a>
</center>



</div>

<div class="visualClear"><!-- --></div>

</div>


<div class="tileItem visualIEFloatFix">

<div class="itemPadding">


<center>
<a href="http://www.sydneybuses.info/news/customer-satisfaction-survey">
<img src="http://www.sydneybuses.info/banners/customer-satisfaction-survey/leadImage" alt="Customer Satisfaction Survey" title="Customer Satisfaction Survey" height="130" width="520" />
</a>
</center>



</div>

<div class="visualClear"><!-- --></div>

</div>


<div class="tileItem visualIEFloatFix">

<div class="itemPadding">


<center>
<a href="http://www.transportmasterplan.nsw.gov.au">
<img src="http://www.sydneybuses.info/global_banners/transport-master-plan/leadImage" alt="Transport Master Plan" title="Transport Master Plan" height="130" width="520" />
</a>
</center>



</div>

<div class="visualClear"><!-- --></div>

</div>


<div class="tileItem visualIEFloatFix">

<div class="itemPadding">


<center>
<a href="http://www.131500.com.au/service-changes/late-breaking-news-1/student-conduct-on-bus-train">
<img src="http://www.sydneybuses.info/global_banners/bus-smart-bag/leadImage" alt="Bus Smart - Bag" title="Bus Smart - Bag" height="130" width="520" />
</a>
</center>



</div>

<div class="visualClear"><!-- --></div>

</div>


<div class="tileItem visualIEFloatFix">

<div class="itemPadding">


<center>
<a href="http://www.131500.com.au/service-changes/late-breaking-news-1/student-conduct-on-bus-train">
<img src="http://www.sydneybuses.info/global_banners/bus-smart-seat/leadImage" alt="Bus Smart - Seat" title="Bus Smart - Seat" height="130" width="520" />
</a>
</center>



</div>

<div class="visualClear"><!-- --></div>

</div>


</div>
</div>

<!-- "next page" action -->
<a class="next browse" title="Next item"><span>Next item</span></a>

<!-- wrapper for navigator elements -->
<div class="navi"><!-- --></div>

</div>

Can anyone help me out please, and either create the code for me to use on my own website, or point me in the right direction?

Many thanks,
Sam.

[Snakeair]

Do you want one for a self hosted Wordpress blog?

Viewing the source and copying that code won't work because it could of been custom coded for that site you linked us to.

If you tell us what software your site runs , we could make a better suggestion for you.

[Sam]

Hi Snakeair,

Many thanks for the help so far and the site I will be making use of is my own custom one, making use of standard HTML. I have a sneaky feeling that to make use of a code such as the one above I'll need to do it using Java Script, although I have never done coding for this before, which is where the help is required.

I hope this helps and thanks for taking the time to get back to me.

Thanks,
Sam

[Tylr]

Mar 10, 2012 4:57:38 GMT -8 Sam said:

The coding I have found so far indicates the following, but everytime I try to use this it doesn't work and uses all the images together at the same time, rather than individually.

That's because the JavaScript controlling the images is hidden in script files beneath the HTML. It's also heavily protected by copyright.

[scratchmod]

I too would be interested in a code for something like this. I have been searching here for a code but have yet to find one. I also was looking at the tabbed table gen but that's not what I really want.
I want to replace the news fader with this Carousel.

Any help would be great, and sorry if I hyjacked the thread.

rgds
scratchmod