I'm new here, and very appreciative for all the help I see in this online community.
My Question is about the circular option in jCarousel and the issue I'm having with it. I have a site I'm starting to build, and I have an example of the issue up on one of the pages. The site is very empty as of yet, however the example is there none the less.
Now for the code-
The HTML:
<!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>Howard Ray Davis - jCarousel practice</title>
<script src="../assets/js/jquery.js" type="text/javascript"></script>
<script src="../assets/js/jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".slider").jCarouselLite({
visible: 1,
auto: 1000,
speed: 1000,
scroll: 1
});
});
</script>
<link href="../hrd.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="aa" style="text-align=: center;">
<h1>jCarousel Practice</h1>
</div>
<div id="ba">
<div id="bb">
<div id="bc">
<div class="slider">
<ul>
<li class="fl"><div style="width: 800px;height: 300px;background-color: #F00;"></div></li>
<li class="fl"><div style="width: 800px;height: 300px;background-color: #666;"></div></li>
<li class="fl"><div style="width: 800px;height: 300px;background-color: #0FF;"></div></li>
<li class="fl"><div style="width: 800px;height: 300px;background-color: #C09;"></div></li>
</ul>
</div>
</div>
</div>
</div>
<div id="ya"></div>
<div id="za">
</div>
</body>
</html>
The CSS:
@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}
html {
height: 100%;
}
body {
position: relative;
height: 100%;
}
#aa {
width: 100%;
height: 60px;
background-color: #333;
color: #FFF;
text-align: center;
}
#ba {
width: 100%;
}
#bb {
width: 1000px;
margin: auto;
}
#bc {
width: 800px;
margin: auto;
overflow: hidden;
}
#ya {
width: 100%;
height: 40px;
margin-top: 10px;
}
#za {
width: 100%;
height: 40px;
position: absolute;
bottom: 0px;
background-color: #333;
}
Any help with solving this issue would be greatly appreciated!
Doesn't look like the problem is with your CSS or JS. I went to your example site and downloaded your HTML source, the problem is in this block of code:
<ul style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 4800px; left: -3286.26px;"><li style="overflow: hidden; float: left; width: 800px; height: 300px;" class="fl"><div style="width: 800px; height: 300px; background-color: rgb(204, 0, 153);"></div></li>
<li style="overflow: hidden; float: left; width: 800px; height: 300px;" class="fl"><div style="width: 800px;height: 300px;background-color: #F00;"></div></li>
<li style="overflow: hidden; float: left; width: 800px; height: 300px;" class="fl"><div style="width: 800px;height: 300px;background-color: #666;"></div></li>
<li style="overflow: hidden; float: left; width: 800px; height: 300px;" class="fl"><div style="width: 800px;height: 300px;background-color: #0FF;"></div></li>
<li style="overflow: hidden; float: left; width: 800px; height: 300px;" class="fl"><div style="width: 800px;height: 300px;background-color: #C09;"></div></li>
<li style="overflow: hidden; float: left; width: 800px; height: 300px;" class="fl"><div style="width: 800px; height: 300px; background-color: rgb(255, 0, 0);"></div></li></ul>
Lines 155-160 of your HTML file. My guess is you're trying to use the  's as pseudo-padding or margins. Remove those and just add a margin-top: 10px to div.slider and it should work as you expect it to.