Skip to main content
100%

jsperf carouFredSel

✓ Published0🌍 Public
Aabernier
Last edited Jan 23, 2012
Created on Jan 23, 2012

This example shows a refactored version of the jQuery carouFredSel plugin, a carousel library for scrolling through sets of items. The code sets up an auto-playing, configurable carousel with support for mousewheel navigation, touch gestures, and cookie-based start positions. It handles responsive sizing, item pagination, and custom events for lifecycle hooks. The refactored version organizes the logic into a CarouFredSel constructor and prototype, separating concerns like scroll timing, animation queues, and configuration merging.

AI-generated description

Similar vizzes

Loading thumbnail…

jQuery.fn.caroufredsel.js

This gallery example demonstrates a jQuery plugin, `carouFredSel`, which transforms a set of DOM elements into an infinite, scrollable carousel. The visualization showcases the plugin's code architecture, including its constructor, prototype methods for initialization, event binding, and utility functions for item navigation, sizing, and effects. The example highlights how the plugin manages scrolling animations, navigation controls, and responsive sizing through a modular system of helper functions, all written in JavaScript with a CoffeeScript version provided.

Aabernier
87% match
Loading thumbnail…

carouFredSel test -- insertion

This example demonstrates inserting new items into a jQuery carousel using the carouFredSel plugin, with a form that triggers the `insertItem` event on the list. The carousel displays lettered list items of random sizes, navigable via previous/next buttons, and supports variable item insertion at specified positions. The code uses jQuery templates (`tmpl`) to render items, carouFredSel’s `insertItem` trigger, and CoffeeScript for logic. A form with inputs for item text, position, and original-order handling submits data via `jQuery.toObject`, while CSS customizes the layout and debug overlays.

Aabernier
72% match
Loading thumbnail…

Gist 83eee1cf3c019a0fa43d

This example demonstrates a minimal carousel component built with Backbone.View, jQuery, and Lodash. The view manages a list of items, tracking the active and previous indexes while allowing navigation via prev/next buttons or direct method calls like `go(2)` and `next(3)`. It applies CSS classes such as `active`, `previous`, `forward`, and `backward` to reflect state changes, and triggers a `carouselchange` event whenever the current item changes. The code supports optional looping, configurable step sizes, and explicit selection of item and navigation elements via the `el`, `items`, `prev`, and `next` options.

Aabernier
71% match
Loading thumbnail…

Gist b5b1465342d4885de179

This animated visualization demonstrates a carousel interface built with Backbone.js, where items cycle through views with smooth transitions. The code uses a Backbone View to manage carousel behavior, including previous/next navigation controls and automatic item rotation. The animation renders the carousel's items dynamically, updating the active element as users interact with the controls. The visualization relies on jQuery for DOM manipulation and Underscore for utility functions, with the Backbone framework providing the structural foundation for the view logic.

Aabernier
69% match
Loading thumbnail…

$.ui.cycling

This example demonstrates a jQuery UI cycling widget that lets users navigate through different carousel layouts—horizontal, vertical, and hexagonal—with prev/next controls. The widget cycles through items, highlighting the active one, and supports options for looping, step size, and min/max bounds. A flashing "cyclingchange" label appears on each transition, and the active item is scrolled into view with animation. The hexagonal carousel arranges its six items in a ring with a central active position.

Aabernier
66% match
Loading thumbnail…

Gist 7416538

A rotating carousel cycles through a list of slider frames, each displaying a distinct visual effect. The code uses `requestInterval` to trigger frame transitions every four seconds, removing the first frame and appending a cloned copy to the end. Stylus styles define three transition effects—fade, scroll-down, and scroll-left—using CSS `transition` properties with `transform: translate3d` and opacity changes. The example demonstrates pure CSS-based animation without a charting library, relying on DOM manipulation and hardcoded item dimensions for offset calculations.

Aakre54
65% match
Loading thumbnail…

Gist 364813

This example implements a custom jQuery autocomplete widget with animated show-and-hide behavior. It uses `jQuery` methods such as `fadeTo`, `stop`, and `show` to control the visibility of a suggestion box, while handling keyboard navigation for arrow keys, tab, and enter. The code fetches suggestions via JSONP requests, renders them as list items, and tracks the selected index with `data`. Stippling effects—fade-in and fade-out—are applied through custom functions, though the code notes issues with animation state confusion. The source is a JavaScript file from a gist.

XXXX
64% match
Loading thumbnail…

Simple Bootstrap Carousel

A Bootstrap carousel displays a sequence of three placeholder images, each a solid color block, with left and right arrow controls for manual navigation. The example relies on jQuery 2.2.4 and Bootstrap 3.3.6's carousel JavaScript plugin, initializing the carousel with `data-ride="slide"` and `data-interval="false"` to prevent auto-advancing. The `carousel-control` links trigger previous and next slides via the `data-slide` attribute, while the active slide is marked by the `.active` class on the `item` div. The layout is constrained by a wrapper set to 800 pixels wide, with a light gray page background.

Aadamfknapp
63% match