🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A jQuery image slider plugin which allows you to loop infinitely through an array images with a crossfade transition effect.

Carousel Image-Slider

Documentation

Carry On Carousel

Carry on Carousel is a minimal jQuery based image carousel/image slider.

Anti-features

  • No configuration options
  • No keyboard control
  • No pause and play
  • Forward only

Rationalle

Carousel's are a dime a dozen. Carousels also offer so many options that just setting one up can often take more time than simply rolling your own.

Carry on Carousel is designed to be a set and forget image carousel. There are no options. It runs at one speed, supports one transition and has only one way to define your images - through data-attributes.

Dependency

jQuery

How To

1) Install

  • Download the .js file and put it in your /js directory.
  • Ensure you have jQuery referenced in your html page/template.
  • Reference the .js file in your html page/template.

2) Set up your carousel container

You'll need an html element to hold your carousel. You'll probably wan this to be full width, absolutely positioned and sitting behind everything else on your page.

Using the data-images data attribute on your element, specify the array of images you want to display in your carousel.

For example, assuming an images folder called img, your html would look like this:

<div id="carousel"  data-images='["img/white.jpg",                                    "img/yellow.jpg",                                    "img/amazing.jpg",                                    "img/street.jpg"]'> </div>

3) Activate the plugin

Call the plugin on the jQuery load:

<script>     $(function() {         $("#carousel").carryOnCarousel();                     }); </script>

4) Enjoy

Example

There's an example in the repo's example folder, complete with some minimal styling based on Bootstrap.

Copyright and license

Code released under the MIT license. Copyright (c) 2015, IntenseAgile


You May Also Like