Ask your JavaScript questions! Pay money and get answers fast! (more info)

Modfy next/prev pager for jQuery Cycle2 JavaScript

I am using Cycle2 to create a carousel of blog posts. Here is the code I am using successfully


<div class="slideshow cycle-slideshow"
data-cycle-slides=">div"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-carousel-visible=3
data-cycle-carousel-fluid=true
data-cycle-next="#next"
data-cycle-prev="#prev">


When you click the next/prev links it advances 1 slide at a time.

Is it possible to make it advance 3 slides at a time? I am currently showing 3, so when clicking the next button I want it to slide the next 3 posts instead of 1 at a time.

Basically I want to accomplish this http://www.malsup.com/jquery/cycle/div.html using Cycle2 but instead of having 1, 2, 3... I want it to use Next/Prev buttons.

Answers (1)

2013-04-10

Daniel Mesteru answers:

Hello,

I think you should use instead this carousel transition plugin form Cycle2. It seems to be close to your needs.

http://www.malsup.com/jquery/cycle2/demo/carousel.php#controls

Basically, for the pagination, you would need to change the actual code to:

<div class="slideshow"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-carousel-visible=5
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-pager="#pager"
>
</div>

<div class=center>
<a href=# id=prev>&lt;&lt; Prev </a>
<a href=# id=next> Next &gt;&gt; </a>
</div>

<div class="cycle-pager" id=pager></div>