how to hide skitter-slider jquery plugin's Next and Prev navigation buttons

Question

skitter-slider plugin is setup with following props but whenever I mouse over the slides the next and prev buttons become visible. I need to remove the buttons even when mouse is over the slides. I think it should be handled by navigation: false but it does not work.

<!-- Init Skitter -->
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $('.box_skitter_large').css({width: 530, height: 110}).skitter({
                theme: 'round',
                numbers_align: 'center',
                navigation: false,
                enable_navigation_keys: false,
                progressbar: false, 
                dots: true, 
                preview: false,
                hideTools: true
            });
        });
    </script>

I have also tried adding display:none to all following classes in skitter.styles.css file.

.skitter-round .prev_button, 
.skitter-round .next_button,

Could not understand your question properly. Do you want to show previous, next button of hide it? if you want to hide it than navigation: false should do the trick. — Nimmi, Mar 19 '14 at 07:43
Also you display:block CSS is causing the issue please try by removing it or make it display:none; — Nimmi, Mar 19 '14 at 07:43
@Nimmi: I want to hide the prev and next buttons. i do not know why this does not work. maybe i should try a clean one. — Iman, Mar 19 '14 at 08:20
@karanthakkar : i corrected my mistake in question. after navigation:false does not work i add display:none to all navs but does not work — Iman, Mar 19 '14 at 08:22
I used chrome and IE. and both shows the button even if i change the theme only the ui and placement of buttons changes. — Iman, Mar 19 '14 at 08:39
dear nimmi it is resolved by adding important. please post your answer so i can mark it as answer — Iman, Mar 19 '14 at 08:43

newTag · Accepted Answer · 2014-03-19T08:55:16.057

1

Open skitter.styles.css and change this line display: block; to

 display: none !important;

In skitter.styles.css,

    /* =Round theme
    -------------------------------------------------------------- */
.skitter-round .prev_button, 
.skitter-round .next_button, 
.skitter-round .play_pause_button, 
.skitter-round .focus_button 
{
    display: none !important; // change to this
    background: url('../images/sprite-round.png') no-repeat;
}

edited Mar 19 '14 at 08:55

answered Mar 19 '14 at 08:13

newTag

2,149
1
22
31

I tried that but it is handled and overridden by skitter itself when mouse is over – Iman Mar 19 '14 at 08:19
1

@imanabidi I have checked this one using "display: none !important;" and its working :) – newTag Mar 19 '14 at 08:52

score 1 · Answer 2 · answered Mar 19 '14 at 08:44

1

You can use display: none !important; to resolve this issue.

answered Mar 19 '14 at 08:44

Nimmi

1,997
2
12
20

sorry that i should choose newTag answer because it is more complete and will helps new comers better. but i really appreciate your help – Iman Mar 19 '14 at 09:00

how to hide skitter-slider jquery plugin's Next and Prev navigation buttons

2 Answers2