Modify next/prev pager for jQuery Cycle2

Question

I'm 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 I 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 show the next 3 posts.

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.

Answer 1

Sort your posts into slides and then have the show go through the slides of posts.

I have a working example here:

<div class="slideShow cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="0" data-cycle-next="#next" data-cycle-prev="#prev" data-cycle-slides="> div" >
    <div>
        <img src="http://malsup.github.com/images/p1.jpg">
        <img src="http://malsup.github.com/images/p2.jpg">
        <img src="http://malsup.github.com/images/p3.jpg">
    </div>
    <div>
        <img src="http://malsup.github.com/images/p4.jpg">
    </div>
</div>
<div class="center"> 
    <a href=# id="prev">Prev</a>  
    <a href=# id="next">Next</a>
</div>

Answer 2

Don't cluster a certain number of elements in <div>-tags as suggested in the accepted answer!

Above will bother you once you try to implement responsiveness, such as for example when your window gets resized and you suddenly want to display two pictures in a row and not three.

A better approach is to simply bind a click event to your #next and #prev and set the number of slides to jump relatively to the current slide as follows:

$('#next').click(function(){
    $('.cycle-slideshow').cycle('goto', parseInt($('.cycle-slideshow').data("cycle.opts").currSlide + 3));  
});
$('#prev').click(function(){
    $('.cycle-slideshow').cycle('goto', parseInt($('.cycle-slideshow').data("cycle.opts").currSlide - 3));  
});

You may delete the following two lines from your slideshow configuration:

data-cycle-next="#next"
data-cycle-prev="#prev"

The step size (here 3) should be changed once your window resizes and therefore your grid changes. Use css media queries and jquery for that.