Never Print Magazines

    responsive-carousel

    1.5.8 • Public • Published

    Responsive Carousel

    Filament Group

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

    Getting Started

    Install using npm using:

    npm install responsive-carousel
    

    This will create a copy of the project in your node_modules folder.

    Or get the production version (.min.js) or the development version (.js) from the releases page. Click the dist-<version>.tar.gz download.

    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 Gruntfile.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.

    Set the Carousel Speed

    To declaratively set the speed of the carousel, add a data-interval to the carousel container with a value set in milliseconds.

    <!-- set the carousel to change every 5 seconds -->
    <div class="carousel" data-autoplay data-interval="5000">
      <div>
        <img src="...">
      </div>
      ...
    </div>

    For a demo see test/functional/flip-auto.html .

    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!

    License

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

    Keywords

    none

    Install

    npm i responsive-carousel

    DownloadsWeekly Downloads

    52

    Version

    1.5.8

    License

    MIT

    Unpacked Size

    884 kB

    Total Files

    56

    Last publish

    Collaborators

    • filamentgroup-admin
    • jlembeck
    • johnmbender
    • maggiewachs
    • scottjehl
    • zachleat