<section class="contentSlider">
    <section class="contentSliderControls">
        <a href="#" class="controlPrev">Prev</a>
        <a href="#" class="controlNext">Next</a>
        <ul class="controlSlides"></ul>
    </section>
    <ul class="slides">
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
    </ul>

$(function() {
    $('.slides').cycle({
        fx:      'scrollHorz',
        timeout:  0,
        prev:    '.contentSliderControls > .controlPrev',
        next:    '.contentSliderControls > .controlNext',
        pager:   '.contentSliderControls > .controlSlides',
        pagerAnchorBuilder: pagerFactory
    });

function pagerFactory(idx, slide) {
    return '<li><a href="#">'+(idx+1)+'</a></li>';
    };
});

/* Content Slider */

.contentSlider {
position: relative;
}

.contentSlider, .contentSlider > .slides {
height: 504px;
}

.controlSlides > li {
float: left;
}

.contentSlider > .slides {
z-index: 1;
}

.sliderImage {
width: 100%;
}

.contentSliderControls {
height: 504px;
position: absolute;
width: 100%;
z-index: 2;
}

.contentSliderControls > .controlPrev {
background-color: #ffffff;
color: #000000;
display: block;
float:left;
height: 504px;
opacity: .5;
width: 10%;
}

.contentSliderControls > .controlNext {
background-color: #ffffff;
color: #000000;
display: block;
float:right;
height: 504px;
opacity: .5;
width: 10%;
}