SO Help: Circular Content Carousel remove loop
http://stackoverflow.com/questions/16030144/circular-content-carousel-remove-loop
by c2webdev
HTML
<script src="http://tympanus.net/Development/CircularContentCarousel/js/jquery.mousewheel.js"></script>
<script src="http://tympanus.net/Development/CircularContentCarousel/js/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="http://tympanus.net/Development/CircularContentCarousel/css/style.css">
<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
<div class="ca-item ca-item-1">
<div class="ca-item-main">
<div class="ca-icon"></div>
<h3>Stop factory farming</h3>
<h4>
<span class="ca-quote">“</span>
<span>The greatness of a nation and its moral progress can be judged by the way in which its animals are treated.</span>
</h4>
<a href="#" class="ca-more">more...</a>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h6>Animals are not commodities</h6>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</div>
<ul>
<li><a href="#">Read more</a></li>
<li><a href="#">Share...
CSS
html, body { margin: 0; height: 100%; padding: 0; }
.ca-container { max-height: 80%; width: 80%; }
JavaScript
/*
--- BEGIN CUT PLUGIN HERE ---
*/
/*!
* Originally Designed by MARY LOU
* http://tympanus.net/codrops/author/crnacura/
* http://tympanus.net/codrops/2011/08/16/circular-content-carousel/
*
* Option "infinite" add by JD McKinstry
* http://jdmckinstry.host-ed.me/www/
* http://spyk3lc.blogspot.com/
* !
*/
(function($) {
var aux = {
// navigates left / right
navigate : function( dir, $el, $wrapper, opts, cache ) {
var scroll = opts.scroll,
factor = 1,
idxClicked = 0;
if( cache.expanded ) {
scroll = 1; // scroll is always 1 in full mode
factor = 3; // the width of the expanded item will be 3 times bigger than 1 collapsed item
idxClicked = cache.idxClicked; // the index of the clicked item
}
if (dir == -1 && !opts.infinite && $wrapper.find('div.ca-item').first().position().left == 0) { cache.isAnimating = false; return; }
if (dir == 1 && !opts.infinite && $wrapper.find('div.ca-item').last().position().left == (cache.itemW * factor * scroll)) { cache.isAnimating = false; return; }
// clone the elements on the right / left and append / prepend them according to dir and scroll
if (opts.infinite) {
if( dir === 1 ) {
$wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) {
$(this).clone(true).css( 'left', ( cache.totalItems - idxClicked + i ) * cache.itemW * factor + 'px' ).appendTo( $wrapper );
});
}
else {
var $first = $wrapper.children().eq(0);
$wrapper.find('div.ca-item:gt(' + ( cache.totalItems - 1 - scroll ) + ')').each(function(i) {
// insert before $first so they stay in the right order
$(this).clone(true).css( 'left', - ( scroll - i + idxClicked ) * cache.itemW * factor + 'px' ).insertBefore( $first );
});
}
}
// animate the left of each item
// the calculations are dependent on dir and on the cache.expanded...