Comments on: jQuery cycle plugin as carousel

By: Rahen

Rahen — Tue, 23 Mar 2010 18:55:57 +0000

Hi jvella,
with cycle plugin u can use multiple images or whatever per slide — just like jcarousel…
u can wrap multiple images by a div or any block item… or u can use my tiny $.splitUp function… which is able to make dynamically slit Up long slides… into new smaller segments/slides…

$.fn.splitUp=function(splitBy,wrapper){
    $all= $(this).find('>*');
    var fragment=Math.ceil($all.length/splitBy);
    for (i=0;i
//guess max 3 images per slide

u can use it something like…
$('div#slides')
.splitUp(4,'')
.cycle({
fx: 'scrollHorz'
});

or guess you have log ul/li slides….. in that case… use
$('div#slides')
.splitUp(4,'')
.cycle({
fx: 'scrollVert',
next: '#scroll #down',
prev: '#scroll #up',
//fit: true,
speed: 2000,
timeout: 0,
cleartype: 1
});

thanks

By: adnan

adnan — Wed, 04 Nov 2009 04:36:33 +0000

@jvella, can you pls send me the url of your work. I did not find any prob with IE7.

By: jvella

jvella — Tue, 03 Nov 2009 22:29:00 +0000

I have a slideshow using only cycle with a scroll horz. I have six thumbs, three visible at first with prev and next arrows to see the other three. I also have an automatic transition through each thumb but when it gets to the fourth thumb, it doesn’t scroll. Is this possible? Thanks!

By: jvella

jvella — Tue, 03 Nov 2009 15:39:47 +0000

Does your scrollHorz sometimes not work in IE 7?

By: adnan

adnan — Sun, 25 Oct 2009 18:01:16 +0000

Jvella, that’s how cycle works. As you are putting 3 thumbs per div cycle will scroll one div at a time which is 3 thumbs per slide. You can not scroll one thumb per cycle.

According to your need you must have to use jcarousel plugin. You may have a look at my recent work here http://www.trendtogo.com. I used cycle for the slide-show and jcarousel for the product scroller.

I believe you know how to do that with jcarousel.

By: jvella

jvella — Sun, 25 Oct 2009 16:18:54 +0000

Thanks adnan! This is really close to what I need. My only question: lets say you have six thumbnails. You want three to be visible at first and three to be invisible. Can you have the next and previous buttons run through the thumbs one at a time. You’re solution runs through three at a time. Thanks!

By: adnan

adnan — Sun, 25 Oct 2009 03:13:35 +0000

@jvella, Yes you can do it by putting multiple thumbs in one div and take the div as slide. Say


 multiple images - slide 1
 multiple images - slide 2

and apply

$("#slider").cycle()

If I'm not wrong you are looking for this solution, right?

By: jvella

jvella — Sun, 25 Oct 2009 00:08:35 +0000

Were you able to have multiple thumbs in your cycle carousel? I only can cycle through one thumb at a time!

By: Advanced cycle plugin integration

Advanced cycle plugin integration — Fri, 21 Aug 2009 20:32:45 +0000

[...] cycle plugin integration Add On my another post I mentioned that cycle is a great jQuery plugin. I use it very often for slideshow. Recently I used [...]

By: adnan

adnan — Mon, 29 Jun 2009 03:40:24 +0000

Thank you @Martin