If you’ve been around our site you probably noticed we REALLY like the JQuery Infinite Carousel. We like it because it is really easy to implement and customize. Plus the result looks great, and is more search engine friendly than a Flash carousel.
Here is a quick and easy step-by-step for implementing the carousel into your site.
Step 1: Download the .js file here… http://www.mywebdept.com/js/jquery.infinitecarousel.js and save it into a JS folder on your site
Step 2: Add these two lines to the head of your page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.infinitecarousel.js"></script>
Step 3: Also add this code inside the head of your page. Adjust the images sizes accordingly.
<script type="text/javascript">
$(function(){
$('#carousel').infiniteCarousel({
displayTime: 6000,
textholderHeight : .15,
displayThumbnails: 1,
thumbnailWidth: '242px',
thumbnailHeight: '25px',
displayThumbnailNumbers: 0
});
});
</script>
<style type="text/css">
#carousel {
margin: 0 auto;
width: 1000px;
height: 349px;
padding: 0;
overflow: scroll;
�
}
<!--NOTE THE WIDTH HERE it is the sum of all your pictures - so 2 pics at 150 width each would change this to 300 -->
#carousel ul {
list-style: none;
width: 4000px;
margin: 0;
padding: 0;
position: relative;
}
#carousel li {
display: inline;
float: left;
}
.textholder {
text-align:center;
font-size: 22px;
color:black;
font-weight:bold;
padding: 6px;
-moz-border-radius: 6px 6px 0 0;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
}
</style>
Step 4: Add this code where you want the carousel to go on your page.
<div id="carousel">
<ul>
<li><a href="services/web-design/"><img alt="" src="Images/Home/web-design.jpg" border="0" width="1000" height="349" style="border:0px;" /></a><p>New Websites : Website Redesign : Search Engine Optimized Web Designs</p></li>
<li><a href="services/web-development/"><img alt="" src="Images/Home/web-development.jpg" border="0" width="1000" height="349" /></a><p>Custom Development : E-Commerce : Business Process Automation</p></li>
<li><a href="services/online-marketing/"><img alt="" src="Images/Home/online-marketing.jpg" border="0" width="1000" height="349" /></a><p>Search Engine Optimization : Email Marketing : Social Media Marketing</p></li>
<li><a href="services/content-management/"><img alt="" src="Images/Home/website-management.jpg" border="0" width="1000" height="349" /></a><p>Content Management Systems : Website Updates : Hosting Plans</p></li>
</ul>
</div>
Step 5: Adjust the image paths and captions as desired.
Here is a link to more information about this carousel.
If you have any questions email me or call us.
~Tim Laubacher