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.

Pow-Ian · Accepted Answer · 2013-04-10T16:50:54.790

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>

edited Apr 10 '13 at 16:50

answered Apr 10 '13 at 16:22

Pow-Ian

3,607
1
22
31

Thanks I'll give this a shot. My posts are slides. Each post is contained within a div as a slide but I dont want it to auto-run. I'd prefer a button to advance 3 slides. – gteh Apr 10 '13 at 16:24
this will 'advance' three slides for sure, I am not sure what the plugin uses to advance so I do not know the repercussions of using this method yet. I would personally suggest organizing your 'slides' into groups of three in a div if you are already using a div to wrap a 'slide'. – Pow-Ian Apr 10 '13 at 16:31
I tested it out, and it doesn't seem to work. It is advancing slides 1 at a time instead of 3 – gteh Apr 10 '13 at 16:32
I was afraid that might happen. It may be that you have to queue the action or you may be able to chain them via call back. I will look at the plugin and see if the commands support call backs. – Pow-Ian Apr 10 '13 at 16:34
Actually, took your advice of wrapping every 3 in a div and putting that through cycle. thanks works perfectly – gteh Apr 10 '13 at 16:35
If you do find a solution via jquery I'd love to know, but otherwise I will just use PHP to wrap every 3 posts in a div for now. – gteh Apr 10 '13 at 16:36
Although wrapping all 3 causes a few other issues, such as not being able to make use of cycle-slide-active to target just one post rather than all 3 – gteh Apr 10 '13 at 16:48
It is important to note that this updated answer has a quirk that I think is part of the plugin. If you cycle past the end it loses images for some reason. – Pow-Ian Apr 10 '13 at 16:52
But if you were showing three at a time then the `currentSlide` property would never have been right anyway because the current slide would always be the last slide in the view. – Pow-Ian Apr 10 '13 at 16:53

score 1 · Answer 2 · answered Sep 08 '16 at 07:25

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.

Modify next/prev pager for jQuery Cycle2

2 Answers2