Banner Navigation with Jquery/ JS

So i'm quite new to Js/Jquery. My knowledge is quite basic.

I have a home page banner which needs to slide left or right when clicking previous or next. I have spent some time checking google but i really don't know where to start.

<div id="slider" class="flexslider">
    <ul class="slides">
        <li><img alt="Banner 1" src="images/banner1.jpg"/></li>                             
        <li><img alt="Banner 1" src="images/banner2.jpg"/></li>             
    </ul>
</div>
<div class="banner-overlay">
    <div class="banner-nav">
        <img alt="Previous" src="/images/slide-prev.jpg"/>
        <img alt="Next" src="/images/slide-next.jpg"/>
     </div>
</div>

Thanks very much.