JQuery cycle lite resets back to first slide if you click anywhere on the page

Question

HTML is below, it cycles through these fine when I click on the prev and next divs but if i click anywhere on the page it resets it back to the first li in the list. Any clue as to how to fix this is appreciated.

<ul id="cycle_services">
            <li>
                <div class="service_header"><b>front-end web development</b></div>
                <div class="service_description">description</div>
            </li>

            <li>
                <div class="service_header"><b>back-end web development</b></div>
                <div class="service_description">description</div>
            </li>

            <li>
                <div class="service_header"><b>web application development</b></div>
                <div class="service_description">description</div>
            </li>
</ul>
<div id="button_container">
    <div id="s_prev"></div>
    <div id="s_next"></div> 
 </div>

JQuery:

$(document.body).click(function () {
    $('#cycle_services').cycle({
    prev: '#s_prev',
    next: '#s_next',
    timeout:0
    });
});

Answer 1

Replace

$(document.body).click(function () {

with

$(function () {

You are creating a new slide instance every time you click inside the document.

It should be created only once inside the document ready handler, but you were binding it to the click event.