Jquery Cycle 2 double pager

Question

I have two jQuery Cycles Version 2. http://jquery.malsup.com/cycle2/ I want to have one navigation (#nav) to control both of the cycles. I know it is still BETA, so maybe it isn't possible yet..

    <script src="http://jquery.malsup.com/cycle2/jquery.cycle2.js"></script>
    <script src="http://jquery.malsup.com/cycle2/jquery.cycle2.scrollVert.js"></script>

    <div class="cycle-slideshow"
        data-cycle-fx="scrollVert"
        data-cycle-pause-on-hover="true"
        data-cycle-timeout="0"
        data-cycle-pager="#nav">
        <img src="http://i46.tinypic.com/29oocgm.jpg" data-cycle-pager-template="<a href=#>1</a>" />
        <img src="http://i48.tinypic.com/o602sz.jpg" data-cycle-pager-template="<a href=#>2</a>" />
        <img src="http://i50.tinypic.com/qntoxc.jpg" data-cycle-pager-template="<a href=#>3</a>" />
    </div>
    <br />
    <br />
    <div class="cycle-slideshow"
        data-cycle-fx="scrollVert"
        data-cycle-pause-on-hover="true"
        data-cycle-timeout="0"
        data-cycle-pager="#nav">
        <img src="http://i46.tinypic.com/29oocgm.jpg" data-cycle-pager-template="<a href=#>1</a>" />
        <img src="http://i48.tinypic.com/o602sz.jpg" data-cycle-pager-template="<a href=#>2</a>" />
        <img src="http://i50.tinypic.com/qntoxc.jpg" data-cycle-pager-template="<a href=#>3</a>" />
    </div>
    <div id="nav"></div>

Example: http://jsfiddle.net/hfjXd/

score 0 · Answer 1 · answered May 27 '13 at 08:32

Iøm not sure I understand exctly what you mean but if you just use:

data-cycle-prev=".prev"
data-cycle-next=".next"

on both of the Cycles it should just do it.

check this example: view-source:http://jquery.malsup.com/cycle2/demo/caro-pager.php and this one: http://jquery.malsup.com/cycle2/demo/prevnext.php

Jquery Cycle 2 double pager

1 Answers1