How To Customise jQuery Carousel for Your Header
Customised jQuery Carousel
This is a working example of how to get jQuery Carousel customised to work as a rotating graphic header on your webpage.
First things first – head over to http://sorgalla.com/projects/jcarousel/ and get yourself the http://sorgalla.com/projects/download-zip.php?jcarousel download file.
- Download, extract, stick it in the root of your site.
- Include this inside the <head> tag of the page you’re inserting the jQuery Carousel into, modifying the “src” path name to match the location on your server:
<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script> <script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script> <link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" /> <link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
- I used the ‘autoscrolling’ version to get going, and inserted the following script inside the <head> tag of my page:
<script type="text/javascript"> function mycarousel_initCallback(carousel) { // Disable autoscrolling if the user clicks the prev or next button. carousel.buttonNext.bind('click', function() { carousel.startAuto(0); }); carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); }); // Pause autoscrolling if the user moves with the cursor over the clip. carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); }; jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ auto: 4, wrap: 'last', animation: 800, scroll: 1, initCallback: mycarousel_initCallback }); });
</script>
- Html – all I had to do to the html is insert:
<ul id="mycarousel" class="jcarousel-skin-ie7"> <li> <img id="logotext" src="images/123-header-logo.png" width="516" height="151" alt="123 web design bournemouth logo text" /> </li><li> <img id="logotext" src="images/123-header-logo3.png" width="516" height="151" alt="123 web design bournemouth logo text" /> </li></ul>
- Rinse and repeat the <li> tags again and again with different images as required in each.
- You can also add in custom styled elements such as divs with other content within the <li></li> tags if you want text etc as well as an image – see this link for how we’ve done the 123 web design Bournemouth jquery carousel
- Edit the skin.css file, and / or your own css file if required so that the widths match the header you want to apply the jQuery Carousel to.
I had a little bit of ‘fun’ tweaking my css to get the animation running nicely, but it wasn’t too much of a ball-ache to get the desired effect!
Mucho thanks to our German friends over at Sorgalla.com where I believe this code originated – eternal grateful-nesses to them!
Leave a Reply