Page slider problem

Hi i’m new in web programming and have a problem about my site developing with javascript.i’m trying to make a content slider.i wrote many codes about that but they did’n work.

My site have a logo,after that a page section which should be sliden when user click buttons which appearing at the bottom side of my page.site logic is like this:

<body>
	<div id="mainpage" >
	<div class="container">
  		<div class="header"><img src="TERRAN SITE GIFFLER/anasayfa giffler/logo.gif" alt="Insert Logo Here" name="Insert_logo" width="20%" height="40%" id="Insert_logo"
  			style="background-color: #f2f2f3; display:block; margin-left:40%" /> 		
        </div>
    	<div class="Content">
    	<div class="overflow-img">
        	<ul class="slider"  style="list-style:none;">
            	<li id="anasayfaContent"  >
                	<div id="anasayfaContent">

                    </div>
                </li>
            	<li id="hakkimizdaContent" >
                	<div id="icerik2">
                	</div>
                </li>
                <li id="islerimizContent">
                	<div id="icerik3" >
                    </div>
                </li>
                <li id="icerikContent">
                	<div id="icerik4" >
                    </div>
                </li>
            </ul>
        </div>
	
    </div>

        <div class="point" id="point" onMouseOver="onmouseover()" onMouseOut="onmouseout()">
        	<div id="greypoint" style="height:10px; width:10px; background-color:#999; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; position:absolute; margin-top:15px; visibility:visible">
            </div>
        </div>
			
		<div class="upperline" id="upperline">
        </div>
   		<div class="menu" id="menuButtons" >
				<ul id="sayfalama" style="list-style:none;">
    				<li id="hakkimizda" ><a href="javascript:sayfakaydir(250,'')"><form method="post" ><input name="hakkimizdaButon"  type="button" id="hakkimizdaButon" /></form></a></li>
        			<li id="islerimiz"><a href="javascript:sayfakaydir('',-120)"><form method="post" ><input name="islerimizButon" type="button" id="islerimizButon" /></form></a></li>
        			<li id="iletisim"><a href="javascript:sayfakaydir('',50)"><form method="post" ><input name="iletisimButon"  type="button" id="iletisimButon"/></form></a></li>
    			</ul>
		</div>
		<div class="bottomline" id="bottomline">
		</div>
        <div class="footer">
        <span class="copyright" style="margin-left:600px; font:Tahoma, Geneva, sans-serif 4px; color:#666;">&copy;TerranArtworks</span>
  		</div>
	</div>
	</div>

i’m trying to slide the content of li’s of slider ul when user click the menuButtons.the anasayfaContent will be the main page and appearing at the first load of page.the other li’s moves according to buttons click event.

the explanation was complicated,i know but my mind is too

can anyone help me to solve this problem.

thank you…

The normal way of doing what you seem to want to achieve, is to hide all of the list items when to click a button, and to then show the be that you want to show.

Can you specify an example?cause i try to write some scripts but they didn’t work in any way.

Sure thing - here’s an example - http://jsfiddle.net/pmw57/bUhFc/

I do not want to disable the nivo slider as i have sliders on my reviews which is quite important. However right now I am having huge head ache on how to change the photos in the slider as I can’t figure out and find where and how to replace the default photo with my own photo and design.

Can you show us what you currently have?