Slideshow em UL LI

Olá galera, estou tentando fazer um slideshow em UL com o jquery cycle mas não estou conseguindo fazer ele funcionar.

JS

 <script type="text/javascript">
 $(function(){
         
        $("#slide").cycle({
         pager:'#botao'   
        });
    });
       
        </script>

HTML

 <div class="wrap">
            <div id="slide">
            <ul>
                <li> <a href="#"><img src="images/clientes/1.png"onmouseover="this.src='images/clientes/a1.png'"onmouseout="this.src='images/clientes/1.png'"/></a></li>
                <li> <a href="#"><img src="images/clientes/2.png"onmouseover="this.src='images/clientes/a2.png'"onmouseout="this.src='images/clientes/2.png'"/></a></li>
                <li> <a href="#"><img src="images/clientes/3.png"onmouseover="this.src='images/clientes/a3.png'"onmouseout="this.src='images/clientes/3.png'"/></a></li>
                <li> <a href="#"><img src="images/clientes/4.png"onmouseover="this.src='images/clientes/a4.png'"onmouseout="this.src='images/clientes/4.png'"/></a></li> <li> <a href="#"><img src="images/clientes/5.png"onmouseover="this.src='images/clientes/a5.png'"onmouseout="this.src='images/clientes/5.png'"/></a></li>
            </ul>
            <ul style="position: relative;margin-top: -1px;">
                <li> <a href="#"><img src="images/clientes/6.png"onmouseover="this.src='images/clientes/a6.png'"onmouseout="this.src='images/clientes/6.png'"/></a></li>
                <li> <a href="#"><img src="images/clientes/7.png"onmouseover="this.src='images/clientes/a7.png'"onmouseout="this.src='images/clientes/7.png'"/></a></li>
                <li> <a href="#"><img src="images/clientes/8.png"onmouseover="this.src='images/clientes/a8.png'"onmouseout="this.src='images/clientes/8.png'"/></a></li>
                <li> <a href="#"><img src="images/clientes/9.png"onmouseover="this.src='images/clientes/a9.png'"onmouseout="this.src='images/clientes/9.png'"/></a></li> <li> <a href="#"><img src="images/clientes/10.png"onmouseover="this.src='images/clientes/a10.png'"onmouseout="this.src='images/clientes/10.png'"/></a></li>
            </ul>
             <div id="botao"></div>
            <div class="clear"></div>
        </div> </div>  

CSS

#clientes li{
    float:left;
}

#clientes ul{
 position: relative;
 width: 100%;
    height: 201px;
    float:left;
    
}

#clientes li{
    float:left;
}

#botao{
 position: absolute;
    transform: translateX(-50%);
    left: 50%;
    margin-top: 10px;
     background-color:#d3d3d3;
}
#botao a{
 margin: 0px 2px;   
width: 14px;
height: 14px;
    display: inline-block;
     background-color:#d3d3d3;
}
#botao a div{ 
   
 float:left;    
width: 14px;
height: 14px;
    background-color:#d3d3d3;
    
}

#botao a.activeSlide div{
width: 14px;
height: 14px;
    background-color:#548080;
}

#slide{   
    
    padding: 0;  
    margin:  0;  
    z-index: 1;
}