2014-10-04 2 views
1

Я сделал простой слайдер для смены списков, и он работает только при установке авто до . Мне нужно сделать это, нажав на «prev» и «next». Как настроить функцию jcarousel()?Простой слайдер jcarousel не работает без автоматической установки на 1

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

ответ

0

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

<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' 
    }); 
}); 

Demo

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

+0

спасибо! оно работает. – ondrejko

+0

Отметьте ответ как решение. Рад, что смог помочь. – melancia

+0

сделано, спасибо снова. – ondrejko