Pro Theme Design

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>

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.

• Read More...
• 6 comments