jQuery cycle plugin as carousel

The jQuery cycle plugin is really amazing! I love this plugin for its huge options for image/div slide show. Right now I’m working on a project which has 3 slideshow on one page. One is simple fade effect with text divs, another one is also fade effect with div + image + text and play/pause, next/back option. The third one is a simple carousel with continuous play mode.

I implemented the first two easily with cycle plugin. But I got stuck with the carousel one. The play and the next state is fine as I used the “scrollLeft” fx. The problem is when I click previous button the fx should be “scrollRight” and not “scrollLeft”. I thought it may need a little complex customized function to do this job of applying different transition effect on previous and next event. I had no clue for it. Even no help from google search! I do not like using a lot of plugins at a time. I know there is jCarousel / jCarousel lite plugin for this, but I still believe there must be a way for doing this with cycle.

It took several hours to find out the simple solution. It’s already inside the cycle plugin, but kinda hidden! I am using the “scrollHorz” fx effect and it is fixed now. WOW! again I discovered that “cycle” is really a marvelous plugin of jQuery.

Here is the example on the malsup site: http://www.malsup.com/jquery/cycle/scrollhv.html

This is the simple code I used:

$('#carousels').cycle({
    prev: '#left-arrow',
    next: '#right-arrow',
    pause: 1,
    fx: 'scrollHorz',
    timeout: 6000
});

Related posts:

  1. Advanced cycle plugin integration
  2. Using Dreamweaver Spry validation with jQuery ajax form plugin
  3. jQuery vs. prototype.js
  4. jQuery Drop down menu without setTimeout
  5. jQuery Mix Photo Gallery

13 Comments to “jQuery cycle plugin as carousel”

  1. daspears3000 20 June 2009 at 9:29 am #

    Thanks for posting this, as I was just wondering if cycle could be used for a carousel.

  2. adnan 21 June 2009 at 12:28 am #

    thanks @daspears3000

  3. Martin Heinsdorf 29 June 2009 at 9:17 am #

    Thanks for pointing me to the right documentation. I had almost pounded my head through the wall trying to implement it with scrollLeft and scrollRight.

  4. adnan 29 June 2009 at 9:40 am #

    Thank you @Martin

  5. Advanced cycle plugin integration

    [...] 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 [...]

  6. jvella 25 October 2009 at 6:08 am #

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

  7. adnan 25 October 2009 at 9:13 am #

    @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?

  8. jvella 25 October 2009 at 10:18 pm #

    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!

  9. adnan 26 October 2009 at 12:01 am #

    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.

  10. jvella 3 November 2009 at 9:39 pm #

    Does your scrollHorz sometimes not work in IE 7?

  11. jvella 4 November 2009 at 4:29 am #

    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!

  12. adnan 4 November 2009 at 10:36 am #

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

  13. Rahen 24 March 2010 at 12:55 am #

    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<fragment;i++)
        $all.slice(splitBy*i,splitBy*(i+1)).wrapAll(wrapper);
    return $(this);
}

    //guess max 3 images per slide
    u can use it something like…

    $('div#slides')
.splitUp(4,'<li class=splitUp><ul>')
.cycle({
fx: 'scrollHorz'
});

    or guess you have log ul/li slides….. in that case… use

    $('div#slides')
.splitUp(4,'<div/>')
.cycle({
fx: 'scrollVert',
next: '#scroll #down',
prev: '#scroll #up',
//fit: true,
speed: 2000,
timeout: 0,
cleartype: 1
});

    thanks


Leave a Reply