Better controls

[dlzi]

Hello,

I'm wondering if is possible to have the controls (prev/next) similar to http://flexslider.woothemes.com/basic-carousel.html?

Is there a way to have the controls appearing only when you mouse hover the carousel?

Thanks.

[basilio]

Hi Daniel, You can create every special behavior using the custom events initCarousel, beginCarousel and endCarousel:

$(".gallery").carousel();
$(".gallery").on( "initCarousel", function(event, defaults, obj, action){
    // do stuff
    // **defaults** return all the settings
    // **obj** return the gallery
    // **action** return the direction 'previous' or 'next' (more usefull with beginCarousel & endCarousel)
    // to select the gallery navigation you can use $("#"+defaults.navigation)
    // to select the gallery you can use $(obj) or $(this)
});

I prefer do not add this kind of stuff on the core, so you can be free to create any behavior you want.

Bye

[dlzi]

Hey,

Thanks for your reply. If you don't mind, could you show an example? My JS skills are not that good yet.

Cheers

[basilio]

I made this simple example, hidding and showing the controls on gallery hover. You can modify this using .css() and .animate() to get the effect:

$(".gallery").on("initCarousel", function(event, defaults, obj){
    // Hide controls
    $("#"+defaults.navigation).find(".previous, .next").hide(); 
    // Show controls on gallery hover
    // .stop() prevent queue
    $(obj).hover( function(){ 
        $("#"+defaults.navigation).find(".previous, .next").stop(true, true).fadeIn();
    }, function(){ 
        $("#"+defaults.navigation).find(".previous, .next").fadeOut(); 
    });
});

I hope to help you. Bye!

[dlzi]

That is exactly what I was looking for!

I would suggest you to add this example on your demo page, so other people can take advantage of it.

Thank you.

[basilio]

Thanks Daniel. You're right, I added this example in the documentation of the plugin. in fact, with some images and styles, it looks like you need it ;) http://basilio.github.io/responsiveCarousel/#styling-controls

Bye!

[dlzi]

Oh boy! Great stuff!

Well done. Thank you!

[dlzi]

Hello Basillio,

Sorry for reopening this ticket, but I just found out the that controls don't play nice if you have overflow set to true. They go out of position. I hope you can take a look at that.

Thanks.

[basilio]

Thanks Daniel! I solve this adding some clearfix styles on the example. Cheers!

[dlzi]

Perfect!