I have a jquery/CSS carousel that contains a and li tags. Everything seems to be displaying correctly in terms of the html and styling but it seems like the jquery isn't loading b/c there is no functionality on the carousel. I've tried looking at the scripts tab in Firebug and could only see a breakpoint listed undefined for jquery js library v1.6.2 from the google library I'm calling. I'm a designer trying to learn more development so any help is appreciated! Thanks,
Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hiLounge</title>
<link href="/css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/touchcarousel.css" rel="stylesheet" type="text/css" />
<link href="css/black-and-white-skin.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.touchcarousel-1.2.min.js" type="text/javascript"></script>
<script src="js/cufon.js" type="text/javascript"></script>
<script src="js/League_Gothic_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace ('h1', 'h2', 'ul#nav li');
</script>
<script>
jQuery(function($) {
$("#carousel").touchcarousel({
itemsPerMove: 4,
pagingNav: true, // Enable paging nav. Overrides snapToItems.
// Snap to first item of every group, based on itemsPerMove.
pagingNavControls: true, // Paging controls (bullets).
autoplay:true, // Autoplay enabled.
autoplayDelay:3000, // Delay between transitions.
autoplayStopAtAction:true, // Stop autoplay forever when user clicks arrow or does any other action.
scrollbar: true, // Scrollbar enabled.
scrollbarAutoHide: false, // Scrollbar autohide.
scrollbarTheme: "light", // Scrollbar color. Can be "light" or "dark".
transitionSpeed: 600, // Carousel transition speed (next/prev arrows, slideshow).
directionNav:true, // Direction (arrow) navigation (true or false).
directionNavAutoHide:false, // Direction (arrow) navigation auto hide on hover.
// On touch devices arrows are always displayed.
loopItems: false, // Loop items (don't disable arrows on last slide and allow autoplay to loop).
keyboardNav: false, // Keyboard arrows navigation.
dragUsingMouse:true, // Enable drag using mouse.
scrollToLast: true, // Last item ends at start of carousel wrapper.
itemFallbackWidth: 500, // Default width of the item in pixels. (used if impossible to get item width).
baseMouseFriction: 0.0012, // Container friction on desktop (higher friction - slower speed).
baseTouchFriction: 0.0008, // Container friction on mobile.
lockAxis: true, // Allow dragging only on one direction.
useWebkit3d: false, // Enable WebKit 3d transform on desktop devices.
// (on touch devices this option is turned on).
// Use it if you have only images, 3d transform makes text blurry.
onAnimStart: null, // Callback, triggers before deceleration or transition animation.
onAnimComplete: null, // Callback, triggers after deceleration or transition animation.
onDragStart:null, // Callback, triggers on drag start.
onDragRelease: null // Callback, triggers on drag complete.
});
});
</script>
<style rel="stylesheet" type="text/css">
body {
background: #ffffff;
text-align: center;
font-family: helvetica, arial, sans-serif;
line-height: 25px;
margin-top: 0px;
}
h1 {
font-size: 34px;
line-height: 24px;
color: #007a3d;
}
a:link {
color: #007a3d;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #007a3d;
}
#container {
width: 960px;
margin: auto;
text-align: center;
}
#container #godbar {
width: 960px;
height: 32px;
margin: auto;
position: fixed;
background: url(images/godbar_bg.jpg) repeat-x;
border-left: 1px solid #dbc25e;
border-bottom: 1px solid #dbc25e;
border-right: 1px solid #dbc25e;
}
#container #godbar #godbarIcons {
width: 100%;
height: 32px;
float: right;
text-align: right;
margin-top: 5px;
margin-right: 5px;
}
#container #godbar #godbarIcons ul {
display: inline;
}
#container #godbar #godbarIcons li {
display: inline;
padding-right:13px;
}
#container #header {
width: 960px;
height: 150px;
margin-bottom: 0;
padding-bottom: 0;
}
#container #logo {
width: 233px;
height: 94px;
margin: 0;
padding: 0;
padding-top: 35px;
}
#container #header #logo h1{
width: 233px;
height: 94px;
clear: both;
display: block;
margin: 0 0 0 15px;
background: url(images/logo.jpg) no-repeat;
text-indent: -9999px;
}
#container #header #logo h1 a {
display: block;
width: 233px;
height: 94px;
}
#container ul#nav {
width: 100%;
height: 44px;
text-align: center;
margin: 0 auto;
padding: 0;
background: url(images/navigation_bg.jpg) repeat-x;
list-style: none;
display: block;
}
#container ul#nav a:hover {
text-decoration: none;
}
#container ul#nav li {
margin-top: 5px;
display: inline-block;
float: left;
text-align: center;
padding-top: 5px;
padding-right: 0;
padding-left: 15px;
text-transform: uppercase;
}
#container ul#nav a {
color: #FFF;
}
#container carousel {
position: relative;
width: 100%;
margin: 0 auto;
}
#container #carousel li {
display: inline;
list-style: none;
margin: 0 auto;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<!--GODBAR-->
<div id="godbar">
<div id="godbarIcons">
<ul>
<li id="godbarFacebook"><a href="http://www.facebook.com/hilounge" target="_blank"><img src="images/godbar_fb.png" alt="hilounge on Facebook" /></a>
</li>
<li id="godbarTwitter"><a href="http://www.twitter.com/hilounge" target="_blank"><img src="images/godbar_twitter.png" alt="hilounge on Twitter"/></a>
</li>
<li id="godbarInstagram"><a href="http://www.instagram.com/hilounge" target="_blank"><img src="images/godbar_instagram.png" alt="hilounge on Instagram" /></a>
</li>
<li id="godbarPinterest"><a href="http://www.pinterest.com/hilounge" target="_blank"><img src="images/godbar_pinterest.png" alt="hilounge on Pinterest" /></a>
</li>
<li id="godbarGplus"><a href="https://plus.google.com/b/108830451064104477365/108830451064104477365/posts" target="_blank"><img src="images/godbar_gplus.png" alt="hilounge on Goolge plus" /></a>
</li>
<li id="godbarRss"><a href="http://feeds.feedburner.com/hilounge" target="_blank"><img src="images/godbar_rss.png" alt="hilounge RSS feed" /></a>
</li>
<li id="godbarEmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=hilounge&loc=en_US" target="_blank"><img src="images/godbar_email.png" alt="hilounge email" /></a>
</li>
</ul>
</div>
<!--END GODBARICONS-->
</div>
<!--END GODBAR-->
<!--BEGIN HEADER-->
<div id="header">
<!--BEGIN LOGO-->
<div id="logo">
<h1><a href="index.html">hiLounge</a></h1>
</div>
<!--END LOGO-->
<!--BEGIN NAVIGATION-->
<ul id="nav">
<h2 class="nav"><li><a href="#"> News </a></li>
<li><a href="#"> Entertainment </a></li>
<li><a href="#"> Fashion </a></li>
<li><a href="#"> Munchies </a></li>
<li><a href="#"> Design </a></li>
<li><a href="#"> Reviews </a></li>
<li><a href="#"> Contests </a></li>
</h2>
</ul>
<!--END NAVIGATION-->
</div>
<!--END HEADER-->
<!--BEGIN CAROUSEL-->
<div id="carousel" class="touchcarousel black-and-white">
<ul class="touchcarousel container">
<!-- TouchCarousel items, place any HTML content inside them (img tag is inserted as an example) -->
<li class="touchcarousel-previous">
<img src="images/previous.jpg" width="20" height="184" />
</li>
<li class="touchcarousel-item">
<a href="#"><img src="images/carousel-image.png" width="184" height="184" /></a>
</li>
<li class="touchcarousel-item">
<a href="#"><img src="images/carousel-image2.png" width="184" height="184" /></a>
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image.png" width="184" height="184" />
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image2.png" width="184" height="184" />
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image.png" width="184" height="184" />
</li>
<li class="touchcarousel-next">
<img src="images/next.jpg" width="20" height="184" />
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image2.png" width="184" height="184" />
</li>
<li class="touchcarousel-item">
<img src="images/carousel-image.png" width="184" height="184" />
</li>
<li class="touchcarousel-next">
<img src="images/next.jpg" width="20" height="184" />
</li>
</ul>
</div>
<!--END CAROUSEL-->
<!--BEGIN MAIN-->
<div id="primaryContent">
<h1><a href="#"> 10 Best Bongs You Wish You Made</a></h1>
<a href="#"><img src="images/featured-post-featured-image.png" alt="Post Title" /></a>
<!--BEGIN POSTMETADATA-->
<div id="postMetaData">
<ul>
<li><img src="images/date-icon.jpg" /> March 26, 2013</li>
<li><a href="#"><img src="images/category-icon.jpg" /> Entertainment</a></li>
<li><a href="#"><img src="images/author-icon.jpg" /> James Scaggs</a></li>
</ul>
</div>
<!--END POSTMETADATA-->
<p>
In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and...
<a href="#"> Read More</a>
</p>
<!--BEGIN POSTSHARINGBUTTONS-->
<div id="postSharingButtons">
<ul>
<li>Like</li>
<li>Tweet</li>
<li>G+</li>
<li>Pin it</li>
</ul>
</div>
<!--END POSTSHARINGBUTTONS-->
<a href="#"><img src="images/read-more.jpg" /> Read More </a>
<!-- BEGIN RECENTPOSTS-->
<h2>Recent Posts</h2>
<div id="recentPosts">
<h1><a href="#">5 MUST FOLLOW MARIJUANA FACEBOOK PAGES</a></h1>
<img src="images/featured-image-1.png" alt="post-title" />
<!--BEGIN RECENTPOSTMETADATA-->
<div id="recentPostMetaData">
<ul>
<li><img src="images/date-icon.jpg" /> March 26, 2013</li>
<li><a href="#"><img src="images/category-icon.jpg" /> Entertainment</a></li>
<li><a href="#"><img src="images/author-icon.jpg" /> James Scaggs</a></li>
</ul>
</div>
<!--END RECENTPOSTMETADATA-->
<p>
In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and...
<a href="#"> Read More</a>
</p>
<!--BEGIN POST SHARING BUTTONS-->
<div id="postSharingButtons">
<ul>
<li>Like</li>
<li>Tweet</li>
<li>G+</li>
<li>Pin it</li>
</ul>
</div>
<!--END POST SHARING BUTTONS-->
<h1><a href="#">7 MARIJUANA INFOGRAPHICS YOU DON'T WANT TO MISS</a></h1>
<img src="images/featured-image-1.png" alt="post-title" />
<!--BEGIN RECENTPOSTMETADATA-->
<div id="recentPostMetaData">
<ul>
<li><img src="images/date-icon.jpg" /> March 26, 2013</li>
<li><a href="#"><img src="images/category-icon.jpg" /> Entertainment</a></li>
<li><a href="#"><img src="images/author-icon.jpg" /> James Scaggs</a></li>
</ul>
</div>
<!--END RECENTPOSTMETADATA-->
<p>
In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and...
<a href="#"> Read More</a>
</p>
<!--BEGIN POST SHARING BUTTONS-->
<div id="postSharingButtons">
<ul>
<li>Like</li>
<li>Tweet</li>
<li>G+</li>
<li>Pin it</li>
</ul>
</div>
<!--END POSTSHARINGBUTTONS-->
</div>
<!--END RECENTPOSTS-->
</div>
<!--END MAIN-->
</div>
<!--END CONTAINER-->
<div id="footerWrap">
<div id="footer">
<div id="footerLogo">
<a href="index.html"><img src="images/footer-logo.jpg" alt="hiLounge" /></a>
</div> <!--end footerLogo-->
<p>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
<a href="#">Legal</a>
<a href="#">Advertising</a>
</p>
<p id="footerInfo">copyright (c) 2013 <a href="http://www.hilounge.com">hiLounge</a>
</p>
</div>
<!--END FOOTER-->
</div>
<!--END FOOTERWRAP-->
</body>
</html>
Here is the added CSS for the jquery carousel:
/******************************************************\
*
* Base TouchCarousel stylesheet
*
* Contents:
*
* 1. Main containers
* 2. Carousel items
* 3. Arrows(direction) navigation
* 4. Paging navigation
* 5. Scrollbar
* 6. Cursors
*
\******************************************************/
/******************************************************\
*
* 1. Main containers (carousel size, background)
*
\******************************************************/
.touchcarousel {
position: relative;
display: block;
width: 100%;
height: 200px;
float: right;
left: 0px;
margin-bottom: 10px;
/* style is removed after carousel is inited, use !important if you want to keep it*/
overflow: hidden;
}
.touchcarousel .touchcarousel-container {
position: relative;
padding: 0;
list-style: none;
margin-top: 5px;
display: inline-block;
float: left;
text-align: center;
padding-top: 5px;
padding-right: 0;
}
.touchcarousel .touchcarousel-wrapper {
position: relative;
overflow:hidden;
width: 100%;
height: 100%;
}
/******************************************************\
*
* 2. Carousel items (item styling, spacing between items)
*
\******************************************************/
.touchcarousel .touchcarousel-item {
/* use margin-right for spacing between items */
margin: 0 1 0 0;
padding: 0;
float: left;
}
.touchcarousel .touchcarousel-previous {
float: left;
}
.touchcarousel .touchcarousel-next {
position: relative;
float: right;
}
/* Last carousel item */
.touchcarousel .touchcarousel-item.last {
margin-right: 0 !important;
}
/******************************************************\
*
* 3. Arrows(direction) navigation
*
\******************************************************/
/* arrow hitstate and icon holder */
.touchcarousel .arrow-holder {
height: 100%;
width: 45px;
position: absolute;
top: 0;
display: block;
cursor: pointer;
z-index: 25;
}
.touchcarousel .arrow-holder.left {
left: 0;
}
.touchcarousel .arrow-holder.right {
right: 0;
}
/* arrow icons */
.touchcarousel .arrow-icon{
width: 45px;
height: 90px;
top:50%;
margin-top:-45px;
position: absolute;
cursor: pointer;
}
.touchcarousel .arrow-icon.left { }
.touchcarousel .arrow-icon.right { }
.touchcarousel .arrow-holder:hover .arrow-icon { }
.touchcarousel .arrow-holder.disabled { cursor: default; }
.touchcarousel .arrow-holder.disabled .arrow-icon { cursor: default; }
/******************************************************\
*
* 4. Paging navigation
*
\******************************************************/
.touchcarousel .tc-paging-container {
width:100%;
overflow:hidden;
position:absolute;
margin-top:-20px;
z-index:25;
}
.touchcarousel .tc-paging-centerer {
float: left;
position: relative;
left: 50%;
}
.touchcarousel .tc-paging-centerer-inside {
float: left;
position: relative;
left: -50%;
}
/* Paging items */
.touchcarousel .tc-paging-item {
float:left;
cursor:pointer;
position:relative;
display:block;
text-indent: -9999px;
}
.touchcarousel .tc-paging-item.current { }
.touchcarousel .tc-paging-item:hover { }
/******************************************************\
*
* 5. Scrollbar
*
\******************************************************/
.touchcarousel .scrollbar-holder {
position: absolute;
z-index: 30;
left: 6px;
right: 6px;
bottom: 5px;
height:4px;
overflow: hidden;
}
.touchcarousel .scrollbar {
position: absolute;
left:0;
height:4px;
bottom: 0px;
}
.touchcarousel .scrollbar.dark {
background-color: rgb(130, 130, 130);
background-color: rgba(0, 0, 0, 0.5);
}
.touchcarousel .scrollbar.light {
background-color: rgb(210, 210, 210);
background-color: rgba(255, 255, 255, 0.5);
}
/******************************************************\
*
* 6. Cursors
*
\******************************************************/
/* IE and Opera use "move", FF uses -moz-grab */
.touchcarousel .grab-cursor{ cursor:url(grab.png) 8 8, move; }
.touchcarousel .grabbing-cursor{ cursor:url(grabbing.png) 8 8, move; }
/* Cursor that used when mouse drag is disabled */
.touchcarousel .auto-cursor{ cursor:auto; }
/* Copyright 2011, Dmitry Semenov, http://dimsemenov.com */
First:
test the link to jQuery. You're using Goole's CDN so you can pop that link right into the browser. BTW it works fine.
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Second:
Firebug, just open the console and type in '$().jquery' without the quotes... if jQuery is loaded it will spit out a version number otherwise it will spit out an error.
Third
Check your ID & Classes in HTML, CSS & JS. For certain you have some broken CSS on your carousel container which is probably screwing things up. I took the CSS below right from your markup and you can see that '#container carousel' should be '#container #carousel'. Without that I don't think anything is going to move.
#container carousel {
position: relative;
width: 100%;
margin: 0 auto;
}