dextermorgan
asked on
Jcarousel - circular carousel
Im trying to get a Carousel running using this plugin for jquery, but when my carousel gets to the last image, it just carries on with blank divs and doesn't start again at the beginning. I have wrap set to circular, is there another config setting i should change.
Jcarosel -
http://sorgalla.com/jcarousel/
Jcarosel -
http://sorgalla.com/jcarousel/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Poster Press - Featured artists</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="css/jquery-1.2.3.pack.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="css/jquery.jcarousel.pack.js"></script>
<!--
jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="css/skin.css" />
<style type="text/css">
/**
* Additional styles for the controls.
*/
#mycarousel-next,
#mycarousel-prev {
cursor: pointer;
margin-bottom: 0px;
text-decoration: underline;
font-size: 11px;
}
div#scroller {
padding: 0px;
margin: 0 0 0 0;
//float:left;
//display:block;
//background-color:#ff0000;
//width:850px;
position:relative;
left:25px;
top:0px;
}
div#scroller2 {
padding: 0px;
margin: 0 0 0 0;
//float:left;
//display:block;
//background-color:#ff0000;
//width:850px;
position:relative;
left:25px;
top:0px;
}
a:link.scrollItem {font-family:tahoma,arial,sans-serif;font-size:10px;color:#5a5a5a;text-decoration:none;}
a:visited.scrollItem {font-family:tahoma,arial,sans-serif;font-size:10px;color:#5a5a5a;text-decoration:none;}
a:hover.scrollItem {font-family:tahoma,arial,sans-serif;font-size:10px;color:#5a5a5a;}
a:active.scrollItem {font-family:tahoma,arial,sans-serif;font-size:10px;color:#5a5a5a;text-decoration:none;}
span.hListItem{font-family:tahoma,arial,sans-serif;font-size:11px;color:#00aeef;text-decoration:none;}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
// Initialise the first and second carousel by class selector.
// Note that they use both the same configuration options (none in this case).
jQuery('.first-and-second-carousel').jcarousel();
// If you want to use a caoursel with different configuration options,
// you have to initialise it seperately.
// We do it by an id selector here.
jQuery('#third-carousel').jcarousel({
vertical: true
});
});
</script>
</head>
<body>
<div id="outer">
<div id="logo"><img src="img/logo.jpg" width="800" height="150" border="0" alt="Poster Press"></div>
<div id="nav">
<div id="navItem1"><a href="index.html" class="nav">POSTER PRESS</a></div>
<div id="navItem2"><a href="#" class="nav">WEB STORE</a></div>
<div id="navItem3"><a href="issues.html" class="nav">THE ISSUES</a></div>
<div id="navItem4"><a href="artists.html" class="navOn">THE ARTISTS</a></div>
<div id="navItem5"><a href="submissions.html" class="nav">SUBMISSIONS</a></div>
<div id="navItem6"><a href="blog.html" class="nav">THE BLOG</a></div>
<div id="navItem7"><a href="contact.html" class="nav">CONTACT US</a></div>
</div>
<div id="artistHeader"><img src="img/hAustralasia.gif" width="156" height="25" alt="" style="{padding-left:25px;}"></div>
<div id="scroller">
<div id="mycarousel-prev" class="jcarousel-prev-horizontal"></div>
<div id="mycarousel" class="jcarousel-skin-tango">
<ul id="first-carousel" class="first-and-second-carousel jcarousel-skin-tango">
<li><img src="img/australasian1.gif" border="0" style="margin-bottom:7px;margin-right:3px;"><br><span class="hListItem">JAY QUIRK</span><br>AUSTRALIAN<br>ISSUE THREE<br>COVER<br><a href="http://www.livefastliveforever.com" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
<li><img src="img/australasian2.gif" border="0" style="margin-bottom:7px;margin-right:3px;"><br><span class="hListItem">DYLAN MARTORELL</span><br>AUSTRALIAN<br>ISSUE THREE<br>POSTER<br><a href="http://www.hiddenarchive.com" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
<li><img src="img/australasian3.gif" border="0" style="margin-bottom:7px;margin-right:3px;"><br><span class="hListItem">BECI ORPIN</span><br>AUSTRALIAN<br>ISSUE TWO<br>COVER<br><a href="http://www.beciorpin.com" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
<li><img src="img/australasian4.gif" border="0" style="margin-bottom:7px;margin-right:3px;"><br><span class="hListItem">ANTHONY LISTER</span><br>AUSTRALIAN<br>ISSUE TWO<br>POSTER<br><a href="http://www.anthonylister.com" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
<li><img src="img/australasian5.gif" border="0" style="margin-bottom:7px;margin-right:3px;"><br><span class="hListItem">BEN FROST</span><br>AUSTRALIAN<br>ISSUE ONE<br>POSTER<br><a href="http://www.benfrostisdead.com" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
<!--<li><img src="img/spacer.gif" width="1" height="128" border="0"><br><span class="hListItem">ANTHONY LISTER</span><br>AUSTRALIAN<br>COVER ARTIST<br>ISSUE 1<br><a href="#" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
<li><img src="img/spacer.gif" width="1" height="128" border="0"><br><span class="hListItem">ANTHONY LISTER</span><br>AUSTRALIAN<br>COVER ARTIST<br>ISSUE 1<br><a href="#" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
<li><img src="img/spacer.gif" width="1" height="128" border="0"><br><span class="hListItem">ANTHONY LISTER</span><br>AUSTRALIAN<br>COVER ARTIST<br>ISSUE 1<br><a href="#" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
<li><img src="img/spacer.gif" width="1" height="128" border="0"><br><span class="hListItem">ANTHONY LISTER</span><br>AUSTRALIAN<br>COVER ARTIST<br>ISSUE 1<br><a href="#" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>-->
</ul>
</div>
<div id="mycarousel-next" class="jcarousel-next-horizontal"></div>
</div>
<div id="clear"><br><br></div>
<div id="artistHeader"><img src="img/hScandinavia.gif" width="156" height="25" alt="" style="{padding-left:25px;}"></div>
<div id="scroller2">
<div id="mycarousel-prev" class="jcarousel-prev-horizontal"></div>
<div id="mycarousel" class="jcarousel-skin-tango">
<ul id="first-carousel" class="first-and-second-carousel jcarousel-skin-tango">
<li><img src="img/scandinavian1.gif" border="0" style="margin-bottom:7px;margin-right:3px;"><span class="hListItem">FREDRIK MELBY</span><br>NORWEGIAN<br>ISSUE FIVE<br>COVER<br><a href="http://www.behance.net/FredrikMelby" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
<li><img src="img/scandinavian2.gif" border="0" style="margin-bottom:7px;margin-right:3px;"><span class="hListItem">KJETIL WOLD</span><br>NORWEGIAN<br>ISSUE FIVE<br>COVER<br><a href="http://www.anti-ink.com/work.html" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
<li><img src="img/scandinavian3.gif" border="0" style="margin-bottom:7px;margin-right:3px;"><span class="hListItem">SVEIN HAAKON LIA</span><br>NORWEGIAN<br>ISSUE FIVE<br>POSTER<br><a href="http://http://www.bleed.no/" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
<li><img src="img/scandinavian4.gif" border="0" style="margin-bottom:7px;margin-right:3px;"><span class="hListItem">NILLE SVENSSON</span><br>SWEDISH<br>ISSUE FOUR<br>COVER<br><a href="http://www.nillesvensson.com/" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
<li><img src="img/scandinavian5.gif" border="0" style="margin-bottom:7px;margin-right:3px;"><span class="hListItem">ROBERT NILSSON</span><br>SWEDISH<br>ISSUE FOUR<br>COVER<br><a href="http://www.robertnilsson.net" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
<li><img src="img/scandinavian6.gif" border="0" style="margin-bottom:7px;margin-right:3px;"><span class="hListItem">FREDRIK TJERNSTRÖM</span><br>SWEDISH<br>ISSUE FOUR<br>POSTER<br><a href="http://www.fredriktjernstrom.com" class="scrollItem" target="_blank">VISIT WEBSITE</a></li>
</ul>
</div>
<div id="mycarousel-next" class="jcarousel-next-horizontal"></div>
</div>
<div id="clear"><br></div>
<div id="footer">
<a href="index.html" class="footer">POSTER PRESS</a> | <a href="#" class="footer">WEB STORE</a> | <a href="issues.html" class="footer">THE ISSUES</a> | <a href="artists.html" class="footerOn">THE ARTISTS</a> | <a href="submisions.html" class="footer">SUBMISSIONS</a> | <a href="blog.html" class="footer">THE BLOG</a> | <a href="contact.html" class="footer">CONTACT US</a><!-- | MAILING LIST--><div id="footerImg"><!--<input type="text" size="10" name="email"><img src="img/bJoin.gif" width="34" height="16" alt="Join!"> --><a href="http://www.facebook.com/posterpress" target="_blank"><img src="img/icon_fb.gif" width="16" height="16" alt="Facebook" border="0"></a> <a href="http://www.twitter.com/posterpress" target="_blank"><img src="img/icon_twitter.gif" width="16" height="16" alt="Twitter" border="0"></a></div>
</div>
<div id="clear"></div>
<div id="footerBanner">
<a href="http://www.boutiquefrash.com" target="_blank"><img src="img/banner728x90_butikfrash.jpg" width="728" height="90" border="0" alt="Boutique Frash"></a><br>
<br>
<a href="# class="footer">TERMS & CONDITIONS</a> | COPYRIGHT ©2009
</div>
</div>
</body>
</html>
try like this,
jQuery('#mycarousel').jcarousel({
wrap: 'circular'
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks
Check the below url :
http://sorgalla.com/projects/jcarousel/examples/special_circular.html
This example this website has given....