CONTENT ROTATOR WITH JQUERY

    Rating: ★★★★☆
    View: 380
    Download: 343
    Từ khóa:

    Today we want to share a fancy content rotator with you. It shows some image with a headline and sub-headline in each slide and allows navigating through the slides using the thumbnails that also contain a headline. Hiding the thumbnails will reveal a scrollable text container and the navigation arrows will move up so that one can navigate to the previous or next slides.
    The beautiful images are by Andrey & Lili. The images are licensed under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License.
    We also use the jQuery Mousewheel Plugin by Brandon Aaron and the jScrollPane Plugin by Kevin Luck.

    EXAMPLES

    We have two examples, one with autoplay and one without:

    1. Example with autoplay
    2. Example without autoplay

    For the HTML structure we will have a main container, the content wrapper and the container for the thumbs. Each cr-content-container needs an ID assigned which we will reference in each thumb with data-content:

    The slide title

    Some sub-title read more →

    Some text here...

    ...
    ...

    The slide title

    Another slide title

    ...

    The default options are the following:

    $('#cr-container').crotator({
        // slideshow on
        autoplay            : false,
        // slideshow interval
        slideshow_interval  : 3000,
        // if true the thumbs will be shown initially
        openThumbs          : true,
        // speed that the thumbs are shown / hidden
        toggleThumbsSpeed   : 300
    });

    We hope you like this little content rotator and find it useful!

    loading Đang tải...

    template được ưa chuộng