One of the most common requests we get for Mimbo Pro modifications is changing the homepage carousel. In this post I am going to outline a few changes you can make that will help you give some individuality to your homepage design.
Automatic scrolling
Making the Carousel scroll without user interaction is pretty painless with Mimbo Pro. Open up header.php and find the code that initiates the carousel. It should look like this…
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
Then swap it for this
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>
You can change the auto: 2 – to adjust the scroll delay to a value you like.
Anything else
The carousel uses the code from jCarousel, so anything you can change in that can be changed in Mimbo Pro. A full list of all of the jCarusel properties can be seen here.
Elemental is a clean & powerful blog framework for WordPress packed with options for customizable layouts, typography, navigation, widgets, page templates and more.
Hi,
I get a javascript error on the carousel. This started when I published the first posting with the Image key added to a posting.
jQuery(“#mycarousel”).jcarousel is not a function
[Break on this error] jQuery(‘#mycarousel’).jcarousel();
This is the listing from Firebug in Firefox.
jQuery(“#mycarousel”).jcarousel is not a function
(no name)()wordpressfamily (line 19)
e()jquery-1.2.1.pack… (line 11)
e()jquery-1.2.1.pack… (line 11)
e([function()], function(), undefined)jquery-1.2.1.pack… (line 11)
e()jquery-1.2.1.pack… (line 11)
[Break on this error] jQuery(‘#mycarousel’).jcarousel();
Any thoughts? Regards,
Peter
Peter – do you have a website I can look at?
it would be better if you highlight the code from the none code for better reading. just a suggestion
Hi ,
i did this but it’s too fast . Can we set the scroll time ?
Thanks for your help
Guney – notice the blue information box after the code? Change the auto:2 to something else (auto:5?) and it will change the speed
Any luck with successful setup of automatic circular carousel (without any manual navigation)? None of the “wrap” property setting work in providing a true circular carousel. i tried to follow example here:
http://sorgalla.com/projects/jcarousel/examples/special_circular.html
But no luck in removal and re-insertion of item as part of itemVisibleOutCallback function. Any tips?
@BZ: Did you try adding buttonNextHTML: null and buttonPrevHTML: null to the jcarousel initialization?
jQuery(“#carousel”).jcarousel({
auto: 1,
wrap: ‘last’,
visible: 3,
scroll: 3,
buttonPrevHTML: null,
buttonNextHTML: null,
initCallback: initCarousel_function,
itemVisibleInCallback: {
onAfterAnimation: pageAppear_function,
},
itemVisibleOutCallback: {
onBeforeAnimation: pageDisappear_function
}
});
function pageDisappear_function(carousel, item, idx, state) {
// Work with parameters
}
function pageAppear_function(carousel, item, idx, state) {
// Work with parameters
}
Is that what you’ve been asking for?
I am totally out of luck with jCarousel. I just could not get Circular + Auto-Scroll work together. Can someone suggest a fix?
And is there any better way for Auto-Scroll? I find the remove / re-insertion is very bandwidth consuming and laggy.
Hi !
I write you to ask: from where this carousel come from ?
Because I like and use it for one website, but I would like other versions to use into new websites otherwise they seem all equal …
For example … is there somewhere a vertical version of the same carousel ?
Hi – we used the jQuery plugin called jCarousel. It has a vertical option as well so you could integrate that to your own website if you wish.