Jcarousel - circular carousel

dextermorgan
dextermorgan used Ask the Experts™
on
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/


<!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!">&nbsp;&nbsp;--><a href="http://www.facebook.com/posterpress" target="_blank"><img src="img/icon_fb.gif" width="16" height="16" alt="Facebook" border="0"></a>&nbsp;&nbsp;<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>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hello,

Check the below url :
http://sorgalla.com/projects/jcarousel/examples/special_circular.html

This example this website has given....

try like this,

jQuery('#mycarousel').jcarousel({
        wrap: 'circular'
});

Open in new window

Hi,

Below the sample code :

Replace mycarousel_itemList  list according to your requirements :
<!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" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />

<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.2.3.pack.js"></script>

<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.pack.js"></script>

<!--
  jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="../lib/jquery.jcarousel.css" />

<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/ie7/skin.css" />

<script type="text/javascript">

var mycarousel_itemList = [
    {url: 'img/australasian1.gif', title: 'Flower1'},
    {url: 'img/australasian2.gif', title: 'Flower2'},
    {url: 'img/australasian3.gif', title: 'Flower3'},
    {url: 'img/australasian4.gif', title: 'Flower4'},
    {url: 'img/australasian5.gif', title: 'Flower5'},
    {url: 'img/australasian6.gif', title: 'Flower6'},
    {url: 'img/australasian7.gif', title: 'Flower7'},
    {url: 'img/australasian8.gif', title: 'Flower8'},
    {url: 'img/australasian9.gif', title: 'Flower9'},
    {url: 'img/australasian10.gif', title: 'Flower10'}
];

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    return '<img src="' + item.url + '" width="75" height="75" alt="' + item.title + '" />';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});

</script>
</head>
<body>
<div id="wrap">
  <h1>jCarousel</h1>
  <h2>Riding carousels with jQuery</h2>

  <h3>Circular carousel</h3>
  <p>
    jCarousel has no full support for circular carousels. Instead it provides some basic
    helper methods to simply create it. This example shows how to do so.
  </p>

  <ul id="mycarousel" class="jcarousel-skin-ie7">
    <!-- The content will be dynamically loaded in here -->
  </ul>

</div>
</body>
</html>

Open in new window

Author

Commented:
thanks

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial