Skip to content

A jQuery-based script for responsive carousels that work with mouse, touch, and keyboard

License

GPL-2.0, MIT licenses found

Licenses found

GPL-2.0
LICENSE-GPL
MIT
LICENSE-MIT
Notifications You must be signed in to change notification settings

KayLeung/responsive-carousel

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Responsive Carousel

A jQuery-based script for responsive carousels that work with mouse, touch, and keyboard

Build Status

Getting Started

Download the production version or the development version.

In your web page:

<script src="jquery.js"></script>
<script src="dist/responsive-carousel.min.js"></script>
<link href="src/responsive-carousel.css" rel="stylesheet">

<div class="carousel">
	<div>
		<!-- carousel item content here -->
	</div>
	<div>
		<!-- carousel item content here -->
	</div>
</div>

The default build includes the slide/drag transition that you can apply by adding a data attribute and including some additional CSS.

<script src="jquery.js"></script>
<script src="dist/responsive-carousel.min.js"></script>
<link href="src/responsive-carousel.css" rel="stylesheet">
<link href="src/responsive-carousel.slide.css" rel="stylesheet">

<div class="carousel" data-transition="slide">
	<div>
		<!-- carousel item content here -->
	</div>
	<div>
		<!-- carousel item content here -->
	</div>
</div>

Extended features

There are other extensions in the src folder, such as flip and fade transitions, autoplay, keyboard handling, pagination, and more. If you'd like to create a build that includes certain extensions, just add them to the JS files listed under concat in the /grunt.js file, and run grunt from a command line.

Demos

Check out the test/functional/ directory for demos.

Documentation

Preventing Content Looping

The default carousel (responsive-carousel.js) returns to the initial active item(s) once it reaches the end of its list. This behavior can be disabled by annotating the carousel DOM element with data-loop='false' and including responsive-carousel.loop.js directly after the core carousel JS. For example:

...
<script src="path/to/responsive-carousel.js"></script>
<script src="path/to/responsive-carousel.loop.js"></script>
...

<div class="carousel" data-loop="false">
  <div>
	  <img src="...">
  </div>

  ...
</div>

Then, after both the carousel and plugin have loaded you can initialize as normal.

$( ".carousel" ).carousel();

When the carousel reaches the end or beginning of the list, the inserted navigation links (a.next and a.prev) will be decorated with an additional disabled class. This class receives no properties from the library by default.

For a demo see test/functional/no-loop.html.

More

More coming soon.

Examples

Check out the test/functional/ directory for examples.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

Also, please don't edit files in the "dist" subdirectory as they are generated via grunt. You'll find source code in the "src" subdirectory!

Release History

(Nothing yet)

License

Copyright (c) 2012 Filament Group, Inc. Licensed under the MIT, GPL licenses.

About

A jQuery-based script for responsive carousels that work with mouse, touch, and keyboard

Resources

License

GPL-2.0, MIT licenses found

Licenses found

GPL-2.0
LICENSE-GPL
MIT
LICENSE-MIT

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 83.8%
  • CSS 16.2%