Ajuda com menu para selecionar divs

[Leo Sales]

Fala rapaziada beleza, sou novo no fórum e novo na área também, e preciso muito de ajuda!
Estou desenvolvendo um site www.restauranteflorida.com.br e no miolo da página tem um slide que fiz com imagens e usei o cycle.js. Acontece que o cara que fez o layout quer que eu faça o slide com texto e imagens, não somente uma imagem com tudo!
Então estou refazendo essa parte com divs e css e travei agora no final kkkkkk
Eu não consigo fazer com que o primeiro item dos botões (pratos do dia) já venha selecionado quando carregar a página, é também não consigo fazer as setas de next e prev funcionarem.
 

Segue o código HTML:

          <section id="img-animada">
                <div class="conteudo-slider2">
                    <nav id="menu-slide">
                        <ul>
                            <li><a href="#wall-1">Pratos do dia</a></li>
                            <li><a href="#wall-2">Sobremesas</a></li>
                            <li><a href="#wall-3">Cardápio</a></li>
                        </ul>
                        <div class="clear"></div>
                    </nav>
                  <div class="wall wall-1" id="wall-1">
                      <div class="slide-left">
                        <h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Pratos do dia <img src="images/linha_slides2.png" alt="#"></h3>
                        <h4 class="tlt-slides-v">Acompanhe as <br> opções do dia</h4>
                        <p>Entre e confira o prato, o risoto do dia <br> e a sugestão do Chef<p>
                        <button class="vermais"><a href="prato_dia.html">Veja mais</a></button>
                    </div>
                    <div class="slide_right"><img src="images/foto_pratodia.png" alt="#"></div>
                  </div>
                  <div class="wall wall-2" id="wall-2">
                      <div class="slide-left">
                        <h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Sobremesas <img src="images/linha_slides2.png" alt="#"></h3>
                        <h4 class="tlt-slides-v">Delícias <br> da Casa</h4>
                        <p>Entre e confira nossas sobremesas. <br> Experimente nosso campeão de pedidos há <br> mais de 10 anos: o bolo do Tio!<p>
                        <button class="vermais"><a href="#">Veja mais</a></button>
                    </div>
                    <div class="slide_right"><img src="images/foto_sobremesa.png" alt="#"></div>
                  </div> 
                  <div class="wall wall-3" id="wall-3">
                      <div class="slide-left">
                        <h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Cardápio <img src="images/linha_slides2.png" alt="#"></h3>
                        <h4 class="tlt-slides-v">Especialidades <br> da Casa</h4>
                        <p>Nosso cardápio foi elaborado para agradar <br> diferentes paladares. Entre e confira!<p>
                        <button class="vermais"><a href="#">Veja mais</a></button>
                    </div>
                    <div class="slide_right"><img src="images/foto_especialidades.png" alt="#"></div>
                  </div>
                  
                    <div id="next-prev">
                        <a href="#wall-2" id="prev"><img src="images/seta-left.png"></a>
                        <a href="#" id="next"><img src="images/seta-right.png"></a>
                   </div>
                  <div class="clear"></div>
                </div>
      </section> 

 

- CSS:

section#img-animada{ padding-top:30px;
margin-bottom:30px;
position:relative;
}
.conteudo-slider2{
width:800px;
margin:auto;
}
.conteudo-slider2 nav#menu-slide{
position:relative;
margin:auto;
width:405px;
}
nav#menu-slide ul{
list-style:none;
}
nav#menu-slide ul li{
float:left;
margin:0px 20px;
}
nav#menu-slide ul li a{
width:95px;
height:32px;
display:block;
background:url(../images/back_menu_cinza.png) no-repeat;
color:#fff;
text-decoration:none;
text-align:center;
padding:5px 0px;
font-family:"Maven Pro Light 300";
font-size: 11pt
;}
nav#menu-slide ul li a:hover{
background:url(../images/back_menu.png) no-repeat;
}
nav#menu-slide ul li.active a{
background:url(../images/back_menu.png) no-repeat;
}
.wall{
    display: none;
    width: 700px;
    margin:auto;
    margin-top:30px;    
}
.wall:target{
    display: block;
    
}
section#img-animada #next-prev{ position:absolute; bottom:90px; z-index:999;}
#next-prev #prev{ margin-left:0px;}
#next-prev #next{ margin-left:750px;}

 

 

- SCRIPT USADO NOS BOTOES E OUTRO PARA CARREGAR A PRIMEIRA DIV AO ENTRAR NO SITE.(unica maneira que achei na net!):

<script language="JavaScript"> 
window.location="#wall-1"; 
</script>
<script>
$(document).ready(function() {
    $('li').click(function() {
        $('li.active').removeClass("active"); //aqui removemos a class do item anteriormente clicado para que possamos adicionar ao item clicado
        $(this).addClass("active"); //aqui adicionamos a class ao item clicado
    });
});
</script>

 

-------------------------------------------------
Bom é isso rapaziada, não sei se deu para entender, mais se alguém tiver alguma sugestão ou críticas estou disposto a aprender! =)
Obrigado

[Rapadura]

Acho que oque você esta procurando é "paginação"

Abraços.