simple jcarousel slider doesnt work without auto set to 1

Question

i made simple slider for changing lists and it works only when I set auto to 1. I need to make it work by clicking on the "prev" and "next". How can i setup jcarousel() function?

there is jsfiddle: http://jsfiddle.net/mLp7jz3w/1/

html

<div class="jcarousel">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<a class="jcarousel-prev" href="javascript:void(0)">prev</a>
<a class="jcarousel-next" href="javascript:void(0)">next</a>

css

.jcarousel {
position: relative;
overflow: hidden;
width:52px;
height:50px;
background-color: cyan;

}

.jcarousel ul {
width: 270px;
position: relative;
list-style: none;
margin: 0;
padding: 0;

}

.jcarousel li {
float: left;
width:46px;
background-color: yellow;
height:34px;
text-align:center;
padding-top:10px;
border: 1px solid gray;
margin: 2px;

}

javascript

    $('.jcarousel-next').click(function () {
    $('.jcarousel').jcarousel({
          scroll: -1,
          auto: 1,
          wrap: "circular"
    });
});

$('.jcarousel-prev').click(function () {
    $('.jcarousel').jcarousel({
          scroll: 1,
          auto: 1,
          wrap: "circular"
    });
});

Answer 1

Reading the plugin documentation:

<div class="jcarousel">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<!-- You need the data-attribute below -->
<a class="jcarousel-next" data-jcarouselcontrol="true">prev</a>
<!-- You need the data-attribute below -->
<a class="jcarousel-prev" data-jcarouselcontrol="true">next</a>

And you initiated the plugin in a wrong way:

$(function () {
    $('.jcarousel').jcarousel({
        wrap: "circular"
    });

    $('.jcarousel-next').jcarouselControl({
        target: '+=1'
    });

    $('.jcarousel-prev').jcarouselControl({
        target: '-=1'
    });
});

Demo

Note: You need to load the jQuery library, the jCarousel library, then your script, in this exactly order. Stick everything in your page header.