простой слайдер jcarousel не работает без автоматической установки на 1

я сделал простой ползунок для изменения списков, и он работает только тогда, когда я установил auto на 1. Мне нужно, чтобы это работало, нажимая "предыдущая" и "следующая". Как настроить функцию jcarousel()?

есть 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"
    });
});

navigation jquery uislider jcarousel
person ondrejko    schedule 04.10.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтение документации плагина:

<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>

И вы неправильно инициировали плагин:

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

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

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

Демо

Примечание. Вам нужно загрузить библиотеку jQuery, библиотеку jCarousel, затем вашу script именно в таком порядке. Вставьте все в заголовок страницы.

person melancia    schedule 04.10.2014
comment
Отметьте ответ как решение тогда. Рад, что смог помочь. - person melancia; 04.10.2014