jQuery Circular Content Carousel Autoscroll
17,705
Solution 1
here is an update:
Not the best way, but is going to work
Update:
Yes, i agree with function, but Fiddle for some reason return an weird error.
Solution 2
<script type="text/javascript">
$('#ca-container').contentcarousel();
var int = setInterval("$('.ca-nav-next').trigger('click');",1000);
$('.ca-item').hover(function(){
clearInterval(int);
},function(){
int = setInterval("$('.ca-nav-next').trigger('click');",1000);
});
$('.ca-nav').hover(function(){
clearInterval(int);
},function(){
int = setInterval("$('.ca-nav-next').trigger('click');",1000);
});
</script>
Solution 3
I have had the same problem. I have just finished modifying the script a bit to allow for it. It is relatively stable and you can change the variables in the script. Its not pretty, but it works, modifications to clean it up welcome. jquery.contentcarousel.js
(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
}
// clone the elements on the right / left and append / prepend them according to dir and scroll
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 value
$wrapper.find('div.ca-item').each(function(i) {
var $item = $(this);
$item.stop().animate({
left : ( dir === 1 ) ? '-=' + ( cache.itemW * factor * scroll ) + 'px' : '+=' + ( cache.itemW * factor * scroll ) + 'px'
}, opts.sliderSpeed, opts.sliderEasing, function() {
if( ( dir === 1 && $item.position().left < - idxClicked * cache.itemW * factor ) || ( dir === -1 && $item.position().left > ( ( cache.totalItems - 1 - idxClicked ) * cache.itemW * factor ) ) ) {
// remove the item that was cloned
$item.remove();
}
cache.isAnimating = false;
});
});
},
// opens an item (animation) -> opens all the others
openItem : function( $wrapper, $item, opts, cache ) {
cache.idxClicked = $item.index();
// the item's position (1, 2, or 3) on the viewport (the visible items)
cache.winpos = aux.getWinPos( $item.position().left, cache );
$wrapper.find('div.ca-item').not( $item ).hide();
$item.find('div.ca-content-wrapper').css( 'left', cache.itemW + 'px' ).stop().animate({
width : cache.itemW * 2 + 'px',
left : cache.itemW + 'px'
}, opts.itemSpeed, opts.itemEasing)
.end()
.stop()
.animate({
left : '0px'
}, opts.itemSpeed, opts.itemEasing, function() {
cache.isAnimating = false;
cache.expanded = true;
aux.openItems( $wrapper, $item, opts, cache );
});
},
// opens all the items
openItems : function( $wrapper, $openedItem, opts, cache ) {
var openedIdx = $openedItem.index();
$wrapper.find('div.ca-item').each(function(i) {
var $item = $(this),
idx = $item.index();
if( idx !== openedIdx ) {
$item.css( 'left', - ( openedIdx - idx ) * ( cache.itemW * 3 ) + 'px' ).show().find('div.ca-content-wrapper').css({
left : cache.itemW + 'px',
width : cache.itemW * 2 + 'px'
});
// hide more link
aux.toggleMore( $item, false );
}
});
},
// show / hide the item's more button
toggleMore : function( $item, show ) {
( show ) ? $item.find('a.ca-more').show() : $item.find('a.ca-more').hide();
},
// close all the items
// the current one is animated
closeItems : function( $wrapper, $openedItem, opts, cache ) {
var openedIdx = $openedItem.index();
$openedItem.find('div.ca-content-wrapper').stop().animate({
width : '0px'
}, opts.itemSpeed, opts.itemEasing)
.end()
.stop()
.animate({
left : cache.itemW * ( cache.winpos - 1 ) + 'px'
}, opts.itemSpeed, opts.itemEasing, function() {
cache.isAnimating = false;
cache.expanded = false;
});
// show more link
aux.toggleMore( $openedItem, true );
$wrapper.find('div.ca-item').each(function(i) {
var $item = $(this),
idx = $item.index();
if( idx !== openedIdx ) {
$item.find('div.ca-content-wrapper').css({
width : '0px'
})
.end()
.css( 'left', ( ( cache.winpos - 1 ) - ( openedIdx - idx ) ) * cache.itemW + 'px' )
.show();
// show more link
aux.toggleMore( $item, true );
}
});
},
// gets the item's position (1, 2, or 3) on the viewport (the visible items)
// val is the left of the item
getWinPos : function( val, cache ) {
switch( val ) {
case 0 : return 1; break;
case cache.itemW : return 2; break;
case cache.itemW * 2 : return 3; break;
}
}
},
methods = {
init : function( options ) {
if( this.length ) {
var settings = {
sliderSpeed : 500, // speed for the sliding animation
sliderEasing : 'easeOutExpo',// easing for the sliding animation
itemSpeed : 500, // speed for the item animation (open / close)
itemEasing : 'easeOutExpo',// easing for the item animation (open / close)
scroll : 1 // number of items to scroll at a time
};
return this.each(function() {
// if options exist, lets merge them with our default settings
if ( options ) {
$.extend( settings, options );
}
var $el = $(this),
$wrapper = $el.find('div.ca-wrapper'),
$maincontainer = $el.find('div.container'),//used for the hover function
$isopen = 0, //used to detect if the boxes are opened to stop scrolling
$autoscroll = 1, //set to 0 if you dont want autoscroll
$asspeed = 6000, //usual js times, currently set to 6 seconds
$items = $wrapper.children('div.ca-item'),
cache = {};
// save the with of one item
cache.itemW = $items.width();
// save the number of total items
cache.totalItems = $items.length;
// add navigation buttons
if( cache.totalItems > 3 )
$el.prepend('<div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>')
// control the scroll value
if( settings.scroll < 1 )
settings.scroll = 1;
else if( settings.scroll > 3 )
settings.scroll = 3;
var $navPrev = $el.find('span.ca-nav-prev'),
$navNext = $el.find('span.ca-nav-next');
// hide the items except the first 3
$wrapper.css( 'overflow', 'hidden' );
// the items will have position absolute
// calculate the left of each item
$items.each(function(i) {
$(this).css({
position : 'absolute',
left : i * cache.itemW + 'px'
});
});
// click to open the item(s)
$el.find('a.ca-more').live('click.contentcarousel', function( event ) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
$isopen = 1;
$(this).hide();
var $item = $(this).closest('div.ca-item');
aux.openItem( $wrapper, $item, settings, cache );
clearTimeout(tid);
return false;
});
// click to close the item(s)
$el.find('a.ca-close').live('click.contentcarousel', function( event ) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
var $item = $(this).closest('div.ca-item');
aux.closeItems( $wrapper, $item, settings, cache );
$isopen = 0;
return false;
});
// autoscroll
if ($autoscroll == 1){
var tid = setTimeout(ascroll, $asspeed);
$wrapper.bind('mouseover.contentcarousel', function( event ) {
clearTimeout(tid);
});
$wrapper.bind('mouseout.contentcarousel', function( event ) {
if ($isopen == 0){
tid = setTimeout(ascroll, $asspeed);
};
});
};
function ascroll() {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( 1, $el, $wrapper, settings, cache );
tid = setTimeout(ascroll, $asspeed); // repeat myself
};
// navigate left
$navPrev.bind('click.contentcarousel', function( event ) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( -1, $el, $wrapper, settings, cache );
});
// navigate right
$navNext.bind('click.contentcarousel', function( event ) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( 1, $el, $wrapper, settings, cache );
});
// adds events to the mouse
$el.bind('mousewheel.contentcarousel', function(e, delta) {
if(delta > 0) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( -1, $el, $wrapper, settings, cache );
}
else {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( 1, $el, $wrapper, settings, cache );
}
return false;
});
});
}
}
};
$.fn.contentcarousel = function(method) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.contentcarousel' );
}
};
})(jQuery);
Related videos on Youtube
18 : 38
Image Slider - With Auto-play & Manual Navigation Buttons - Using CSS, HTML & Javascript
07 : 11
The "scroll" event in JavaScript | window.onscroll
11 : 57
How to Use Owl Carousel For Your Website | JQuery Owl Carousel Tutorial
22 : 09
Episode 2: Infinite Carousel slider (circular)
14 : 26
How to create an infinite scroll carousel with css
07 : 32
Auto Scroll function by jQuery
Author by
niczcool
Updated on June 04, 2022Comments
-
niczcool almost 2 years
I found a cool carousel script named Circular Content Carousel by Tympanus. It's almost exactly what I need. When clicking on the "more" link, the respective item moves to the left and a content area will slide out.
What I need to achieve now is to make it autoscroll and stopped while mouseover on the carousel and when the content area opened.
I'm a newbie in javascript & jquery, so I desperately need an expert help. Can somebody help me customize this carousel?
Here's a link of the working Circular Content Carousel. http://jsfiddle.net/niczcool/x7jxa/2/
Thanks in advanced.
-
Derek 朕會功夫 almost 12 yearsAFunctionis better than aStringinsetInterval. -
Kader-timon almost 11 yearsHow do i stop the circular effect
