Image Image Image Image Image

© Copyright 2012 ABCoder | Email | RSS

Scroll to Top

To Top

jQuery

14

Jun
2009

27 Comments

In jQuery

By abcoder

jQuery cycle plugin as carousel

On 14, Jun 2009 | 27 Comments | In jQuery | By abcoder

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
});

Tags | , , , , , , , ,

Comments

  1. June 20, 2009

    Reply
    daspears3000

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

  2. June 21, 2009

    Reply
    adnan

    thanks @daspears3000

  3. June 29, 2009

    Reply
    Martin Heinsdorf

    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. June 29, 2009

    Reply
    adnan

    Thank you @Martin

  5. October 25, 2009

    Reply
    jvella

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

    • October 25, 2009

      Reply
      adnan

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

  6. October 25, 2009

    Reply
    jvella

    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!

    • October 26, 2009

      Reply
      adnan

      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.

  7. November 3, 2009

    Reply
    jvella

    Does your scrollHorz sometimes not work in IE 7?

  8. November 4, 2009

    Reply
    jvella

    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!

    • November 4, 2009

      Reply
      adnan

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

  9. March 24, 2010

    Reply
    Rahen

    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

  10. September 11, 2010

    Reply
    Saudi Jobs

    Thanks for sharing cycle plugin.

  11. October 7, 2010

    Reply
    Buzzknow

    but we can’t use jquery cycle to display more than 1 images at the time :(

  12. January 17, 2011

    Reply
    Grafik komputerowy

    Marvelous point of view. I must inform about it my to friend! Best Regards Grafik komputerowy.

  13. April 29, 2011

    Reply
    Lily | The Yuppie Lifestyle

    Thanks so much for pointing this out. I had been trying to make it work with scrollLeft/scrollRight too!

  14. June 3, 2011

    Reply
    poulan home page

    I’m additionally interested in affilate and search engine marketing.

  15. June 18, 2011

    Reply
    fire damage cleanup

    I have been exploring for a little for any high-quality articles or weblog posts in this sort of house . Exploring in Yahoo I ultimately stumbled upon this website. Studying this info So i am satisfied to convey that I have an incredibly just right uncanny feeling I found out just what I needed. I most definitely will make sure to don’t fail to remember this web site and provides it a look a continuing.

  16. August 7, 2011

    Reply
    mike

    Thanks for posting this – saved me some time.

  17. August 22, 2011

    Reply
    Jleagle

    Awesome, I struggled to find a solution to this.

  18. August 25, 2011

    Reply
    jeffreynolte

    Thank you! I had just spend an hour trying to develop my own functions to scrollLeft and Right based on index. oi vey!

  19. September 1, 2011

    Reply
    Mameje

    Many hours I’ve been searching for information about it. Finally, I managed to get the answer – thank to your article. Thanks a lot and keep posting!

  20. September 30, 2011

    Reply
    Jack Donagee

    hello,

    So, your carousel looks like it automatically transitions every SIX SECONDS…

    OR

    you can click a NEXT / PREVIOUS button…

    RIGHT?

    Thanks!

  21. March 8, 2012

    Reply
    Mike

    Thanks man you saved me hours!

  22. March 23, 2012

    Reply
    Chu Hai

    Thanks. It’s helpful for me!

  23. May 10, 2012

    Reply
    Terrilyn Saltus

    I’d have to check with you in this article. That may be not one thing I usually do! I enjoy reading a blog post which will make people think. Also, appreciate it for allowing me to comment!

Submit a Comment