Banner rotation

HTML

<div id="container">

<div id="prev-next">
    <a href="#" id="prev">Previous</a>
    <a href="#" id="next">Next</a>
</div>

<div id="banner-1" class="banner">Banner 1</div>
<div id="banner-2" class="banner active">Banner 2</div>
<div id="banner-3" class="banner">Banner 3</div>

<div id="dot-nav"></div>
    
</div><!--- /container -->

CSS

body { text-align:center; font: 20px Helvetica, sans-serif; }
div, a { padding: 10px; background: #ccc}
#container { width:400px;margin:0px auto;text-align:left; }

.banner {
    display: none;
    width: 400px;
    height: 200px;
}

.active {
    display: block;
    border: 2px solid red;
    }


#next {float: right; margin-right: -160px}
#prev {float: left; margin-left: -140px}

#prev, #next {
    display: block;
    width: 100px;
    height: 32px;
    margin-top: 64px;
    text-align: center;
    }

JavaScript

var totalBanners = 3;
var currentBanner = 2;

$(document).ready(function() {
  $("#prev").click(showPreviousBanner);
  $("#next").click(showNextBanner);
});

function showPreviousBanner() {
    currentBanner--;
    var prevBanner = "#banner-" + currentBanner;
    alert(prevBanner);
    $(prevBanner).show().addClass("active");
    $(prevBanner).siblings(".banner").not(".active").hide();
    }

function showNextBanner() {
    currentBanner++;
    var nextBanner = "#banner-" + currentBanner;
    alert(nextBanner);
    $(nextBanner).show().addClass("active");
    $(nextBanner).siblings(".banner").not(".active").hide();
    }