Skip to main content
100%

Gist 83eee1cf3c019a0fa43d

✓ Published0🌍 Public
Aabernier
Last edited Jun 27, 2017
Created on Jul 17, 2014

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.

AI-generated description
<ul class="mycarousel">
  <li>A</li>
  <li class="active">B</li>
  <li>C</li>
</ul>
<nav>
  <a rel="prev" href="javascript:void 0;">Prev</a>
  <a rel="next" href="javascript:void 0;">Next</a>
</nav>

<script>
var mycarousel  = new CarouselView({
  el: '.mycarousel',
  items: 'li',           // optional, default: '>*'
  prev: 'nav a[rel="prev"]', // optional
  next: 'nav a[rel="next"]', // optional
  noloop: true, // optionnal
});

mycarousel.go(2); // go to the 3rd item
mycarousel.prev(); // by default 1-by-1, ie equivalent to: `carousel.prev(1)`
mycarousel.next(3); // or here, 3 next ahead

mycarousel.$prev.click(mycarousel.prev);
mycarousel.$next.click(mycarousel.next);

// mycarousel.currentIndex -- current index
// mycarousel.previousIndex -- current index
// mycarousel.$nth(1) -- 2nd carousel element
// mycarousel.on('carouselchange', function () {alert('carousel has changed!');})
// mycarousel.$current -- current active item (NB: shortcut for `carousel.$nth(carousel.currentIndex)`)
// mycarousel.$previous -- previous active item (NB: shortcut for `carousel.$nth(carousel.previousIndex)`)

// mycarousel.$prev -- previous "arrow" element
// mycarousel.$next -- next "arrow" element
</script>
ISC Licensed

Similar vizzes

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
85% 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
73% 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
72% match
Loading thumbnail…

jsperf carouFredSel

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.

Aabernier
71% match
Loading thumbnail…

Image Carousel

This example demonstrates a simple image carousel, displaying a sequence of three thematically labeled images—Zip, Zap, and Zop—that users can cycle through. The code uses jQuery (via the `carousel.js` file) to handle click events on the previous and next frame links, shifting the horizontal position of a `.frames` list. The layout relies on a fluid CSS approach where the carousel container hides overflow, and each slide takes up a third of the overall track width. The styling, defined in `main.css`, includes navigation buttons and responsive image sizing. The data source is static image URLs embedded directly in the HTML, with no external data loading or animation libraries beyond core jQuery.

EElaineYu
69% match
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
68% 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
67% match
Loading thumbnail…

sketch

This example demonstrates a jQuery plugin called `stepper` that manages step-by-step navigation through an ordered list of items, visually highlighting the active step while dimming inactive ones. The interface shows a sequence of seven steps with Previous and Next links, allowing users to move forward or backward through the list by clicking those controls or double-clicking a specific step to activate it directly. The code uses the jQuery library to implement custom event-driven behavior, binding handlers for activation, deactivation, and navigation events. The plugin manipulates CSS classes (`active` and `inactive`) to provide visual feedback, relying on the loaded Google-hosted jQuery version rather than any data source or rendering library.

DDylanFM
66% match