CIRCULAR CONTENT CAROUSEL WITH JQUERY

    Rating: ★★★★☆
    View: 277
    Download: 192
    Từ khóa:

    Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position

    Today we want to share a simple circular content carousel with you. The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.

    The beautiful animal icon set in the ZIP file are by Cyberella and they are licensed under the Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0) License.

    THE HTML STRUCTURE

    The structure consists of a main container and a wrapper for the items. Each item contains

    Stop factory farming

    Some text...

    more...
    Animals are not commodities
    close

    Some more text...

    ...
    ...

    The initial view of the content carousel:

    When we click on “more…”, another content area will slide out and move the respective item to the left:

    The default options are the following:

    $('#ca-container').contentcarousel({
        // speed for the sliding animation
        sliderSpeed     : 500,
        // easing for the sliding animation
        sliderEasing    : 'easeOutExpo',
        // speed for the item animation (open / close)
        itemSpeed       : 500,
        // easing for the item animation (open / close)
        itemEasing      : 'easeOutExpo',
        // number of items to scroll at a time
        scroll          : 1 
    });

    We hope you enjoy this simple carousel and find it useful!

    loading Đang tải...

    template được ưa chuộng