Infinite jQuery Carousel – carouFredSel

carouFredSel is a jQuery plugin that converts any kind of HTML element into an infinite and circular carousel.

It can scroll one or more items at the same time both horizontally or vertically.

Every item can be displayed automatically and/or by user interaction (pressing buttons or keys on the keyboard).

jQuery carouFredSel

The plugin works with items in different width-heights and it is compatible with most of the jQuery lightbox plugins.

It is possible to add/remove items from the carousel dynamically, play, pause or control the prev-next items using custom events and manage it at every level with the callbacks provided.

  • Mosselman

    Too bad that it doesn’t work well.

    Check out the ‘pagination’ of the second slider on their site. It hops from the 2nd to the 3rd, then back to 2nd and then to 3rd before it goes to the 1st when you keep pressing the next button or using your left and right buttons.

    Also the pictures slide unevenly. It could be misconfiguration, but it is something that should be checked out.

  • Scheveningen

    Hey Mosselman,
    The pagination does work correctly, the “problem” you’re referring to, is that the carousel contains 12 items and it scrolls 5 items. So after some scrolling, you’ll see mixed pages.

    On start, the 1st item is at the beginning: page 1.
    After scrolling once, the 6th item is at the beginning: page 2.
    After scrolling twice, the 11th item is at the beginning: page 3.
    After scrolling 3 times, the 4th item is at the beginning: page 2.
    After scrolling 4 times, the 9th item is at the beginning: page 3.
    After scrolling 5 times, the 2nd item is at the beginning: page 1.
    After scrolling 6 times, the 7th item is at the beginning: page 2.

    etc etc etc.

    I don’t know what you mean with the pictures sliding unevenly. Tested the plugin in all 5 major browsers without any problems…

  • http://www.pen2000.ru Paint.Net

    Wow, Im not testing it, but its look very good :)

  • bill

    catchmyfame.com’s infinite carousel is better

  • oliver

    it’s true, it doesn’t work
    i trying a simple exemple and nothing

  • Randy

    @Oliver: you should give it a little more effort before posting “it doesn’t work”. What about all the demo’s on the website? They work don’t they?

    I’ve tried the plugin and find it awesome. No other circular carousel plugin is as feature-rich as this one.

  • oliver

    @Randy:
    ok dude, excuse me
    Now i know why it didnt work

    in the demo page, when you click on “view JavaScript” the js code is (for example):
    $(“#foo1”).carouFredSel();

    or in fact the real js code is :
    $(function() {
    $(“#foo1”).carouFredSel();
    });

    Sorry for my last post but i’m not a developper, i’m just a webdesigner

    So randy, i’mma let your finish but i must admit, this carouselFredSel is one of the best jquery plugin of all time !!

  • http://erik-tina.com Tina

    Hi,

    “…is that the carousel contains 12 items and it scrolls 5 items. So after some scrolling, you’ll see mixed pages….”
    -> anyone know how to “fix” this problem??

  • Milos

    CarouFredSel is made to be adapted for any purpose. That is his strong part. If you are a programmer u could scroll almost anything. But if you are not maybe there could be a better solution for u, something that does exactly what you need… difficult, but ok… CarouFredSel it’s a very powerful tool… not just a simple carrousel….

  • Pooja

    The scroll effect is not working in basic example of carousel.I have kept carousel in content page..Included .js files and the java script function before tag.
    And applied .css. but still not working! please help me! i need this working for my academic project!
    here i am attaching the code:

    .image_carousel {
    padding: 15px 0 15px 40px;
    }
    .image_carousel img {
    border: 1px solid #ccc;
    background-color: white;
    padding: 9px;
    margin: 7px;
    display: block;
    float: left;
    }
    .clearfix {
    float: none;
    clear: both;
    }
    #foo1
    {
    width: 870px;
    height: 175px;
    overflow: hidden;
    }

    #foo1 img {
    width : 140px;
    height : 140px;
    }

    $(document).ready(function() {
    $(“#foo1”).carouFredSel({
    items:{
    visible: 3,
    start: “random”,
    width : “140px”,
    height: “140px”
    },

    scroll : {

    items : 8,
    duration : 1000,
    easing : “linear”,
    play : false

    },
    auto : {
    items : 8,
    easing : “linear”,
    pauseDuration : 0,
    pauseOnHover : “immediate”
    }

    });
    });

    Thank you all!

Search