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!
