Position Arrows on Either Side of Carousel

gistfile1.html

<footer>
    <div class="jcarousel">
        <ul>
            <li><img src="1_designs_tab_images/designs_1.png"></li>
            <li><img src="1_designs_tab_images/designs_2.png"></li>
            <li><img src="1_designs_tab_images/designs_3.png"></li>
            <li><img src="1_designs_tab_images/designs_4.png"></li>
            <li><img src="1_designs_tab_images/designs_5.png"></li>
        </ul>
    </div>

    <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
    <a href="#" class="jcarousel-control-next">&rsaquo;</a>
 </footer>

gistfile2.css

/** Carousel **/

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 600px;
    height: 400px;
    display: block;
    margin: 0 auto;
}

.jcarousel ul {
    width: 20000em;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    width: 600px;
    height: 400px;
}

.jcarousel img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

/* Controls - Left & Right Arrows */

.jcarousel-control-prev,
.jcarousel-control-next {
    display: block;
    margin: 0 auto;
    width: 120px;
    height: 120px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 96px/108px Arial, sans-serif;
    -webkit-border-radius: 120px;
       -moz-border-radius: 120px;
            border-radius: 120px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}