CODEWITHSUNDEEP
jquerycarouselcaroufredsel
John Magnolia
John Magnolia

Reputation: 16793

jquery plugin caroufredsel hide next/prev buttons until mouseover carousel

I am trying to make the buttons hide by default and they only become visible when the mouse is over. Although I am having problems where the carousel core code seems to be adding display block even if I set display none in the CSS. 

var $slides = $("#slides");
$slides.find('ul.banners').eq(0).carouFredSel({
    height: 360,
    items: {
        visible: 1
    },
    scroll: {
        easing: "easeInOutSine",
        duration: 1200
    },
    auto: {
        delay: 1000
    },
    prev: {
        button: $slides.find('.prev'),
        items: 1
    },              
    next:{
        button: $slides.find('.next'),
        items: 1
    },
    pagination: {
        container: $slides.find(".pagination"),
        keys: true,
        anchorBuilder: function(nr) { 
            return '<li><a href="#"><span>'+nr+'</span></a></li>'; 
        }
    }
});
$slideButtons = $slides.find(".next,.prev");
$slides.find('ul.banners').hover(function(){
    $slideButtons.fadeIn();
},function(){
    $slideButtons.fadeOut();
});

HTML

<div id="slides">
    <ul class="banners">
        <li><img /></li>
        <li><img /></li>
    </ul>

    <ul class="pagination"></ul>

    <div class="next">Next</div>
    <div class="prev">Previous</div>
</div>

Upvotes: 1

Views: 8436

Answers (6)

Sarwar Abdullah
Sarwar Abdullah

Reputation: 1

Use this simple code in css file.

.carousel .carousel-control { visibility: hidden; } .carousel:hover .carousel-control { visibility: visible; }

Upvotes: 0

Alexandre Guertin
Alexandre Guertin

Reputation: 11

Try the following piece of code:

$("#layout-main").hover(
    function(){
        $(".prev").fadeIn(500);
        $(".next").fadeIn(500);
        $(".pagination a").fadeIn(500);
    }, function(){
        $(".prev").fadeOut(500);
        $(".next").fadeOut(500);
        $(".pagination a").fadeOut(500);
    }
);

Upvotes: 1

Felix Farquharson
Felix Farquharson

Reputation: 352

Make sure that the most recent style attributes (ie. the furthest down in your html) are the ones setting the visibility to nothing. The style options added onto the tags are the most important I believe. Try adding the following to your tag:

<tag style="visible:0;" ></tag>

If this works then you know that this is your problem, this might work as a solution as the JavaScript will probably change the style later on mouse over for example.

If all your includes are in the header, moving your CSS stylesheet (the one setting the visibility to nothing) to come after the others might help, but if your JavaScript is included at the bottom of the page you might either have to edit the JavaScript or move it.

Upvotes: 4

jhoanna
jhoanna

Reputation: 1857

You could try overriding the configuration. I added display: none, to your code. I haven't tested it though.

$slides.find('ul.banners').eq(0).carouFredSel({
    height: 360,
    items: {
        visible: 1
    },
    scroll: {
        easing: "easeInOutSine",
        duration: 1200
    },
    auto: {
        delay: 1000
    },
    prev: {
        display: none,
        button: $slides.find('.prev'),
        items: 1
    },              
    next:{
        display: none,
        button: $slides.find('.next'),
        items: 1
    },
    pagination: {
        container: $slides.find(".pagination"),
        keys: true,
        anchorBuilder: function(nr) { 
            return '<li><a href="#"><span>'+nr+'</span></a></li>'; 
        }
    }
});

Is your CSS stylesheet included after the plugin? You could try overriding via CSS and/or jquery/javascript after the plugin has been executed.

Upvotes: 1

rajesh kakawat
rajesh kakawat

Reputation: 10896

try this way in css

 .next{
    display:none !important;
  }

  .prev{
     display:none !important;
  }

Upvotes: 7

Leslie
Leslie

Reputation: 59

This plugin is using sprite for the rollover effect. I think the quick fix is to photoshop the buttons to lower the opacity.

Upvotes: 3

Related Questions