dream css image slider

Question

Hi,

Does anyone ever use this slider: http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html.

I need someone's advice on how to remove the navigation and only show while on hover.. thanks

Answer 1

Im not sure how you want to remove the navigation but then show (the images?) on hover?

Do you mean you want the images to slide when you hover over the links? And you want the Title and Description bar removed?

Remove the background img from the css :

div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:973px;
height:46px;
display:none;
position:absolute;
//remove this>>
<strike>background:url(images/slide-bg.png) 0 0;<strike>
}

Remove these two elements in the html:

<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>

In script.js look for this line:

 $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" **onclick**="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');

Change the onclick to mouseOver

---

In response to your clarification: Put this on the top inside the body or head(not sure which is faster)

    <script type="text/javascript>
    $(document).ready(function{
//hide the nav when page loads
     $("#slide-nav").hide();
//show and hide on hover
     $("#slide-holder").hover(
      function () {
        $(this).show();
      },
      function () {
        $(this).hide();
      }
    );
    })
    </script>

Haven't tested this..Really hope that helps you