Cover Flow Style Carousel For The Web - Acarousel.js

Acarousel.js is a tiny (3kb minified) jQuery plugin to create a cover flow style image carousel for the web.

It enables the user to scroll between images by clicking siblings, and focuses on one image at a time, by centering and enlarging it in the view.

How to use it:

1. Add a list of images to the carousel container.

<div id="carousel_container">
  <ul id="carousel">
    <li id="c1"><a href="#"><img src="1.jpg"></a></li>
    <li id="c2"><a href="#"><img src="2.jpg"></a></li>
    <li id="c3"><a href="#"><img src="3.jpg"></a></li>
    <li id="c4"><a href="#"><img src="4.jpg"></a></li>
    <li id="c5"><a href="#"><img src="5.jpg"></a></li>
    ...
  </ul>
</div>

2. Add navigation and pagination controls to the bottom of the carousel.

<div id="move_mark">

  <!-- Pagination Controls -->
  <!-- Can be anything like dots, thumbnails, etc -->
  <a class="move" href="#">●</a>
  <a class="move" href="#">●</a>
  <a class="move" href="#">●</a>
  <a class="move" href="#">●</a>
  <a class="move" href="#">●</a>

  <!-- Navigation Arrows -->
  <div id="move_back"><a href="#">←</a></div>
  <div id="move_next"><a href="#">→</a></div>
  
</div>

3. The example CSS for the carousel & its controls.

#carousel_container {
  width: 95%;
  height: 300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5);
}

#carousel {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
  position: absolute;
  list-style-type: none;
}

#carousel li {
  position: absolute;
  margin: 0;
  padding: 0;
  float: left;
}

#carousel li img {
  width: 100%;
  height: 100%;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

#c1 {
  width: 200px;
  height: 150px;
  left: 200px;
  top: 130px;
  z-index: 5;
}

#c2 {
  width: 150px;
  height: 113px;
  left: 350px;
  top: 100px;
  z-index: 4;
}

#c3 {
  width: 100px;
  height: 75px;
  left: 450px;
  top: 50px;
  z-index: 3;
}

#c4 {
  width: 80px;
  height: 60px;
  left: 400px;
  top: 20px;
  z-index: 2;
}

#c5 {
  width: 70px;
  height: 53px;
  left: 320px;
  top: 10px;
  opacity: 0.5;
  filter: alpha(opacity=50);
  z-index: 1;
}

#move_mark {
  width: 95%;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  bottom: 0;
}

#move_mark a {
  color: #666;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

#move_mark a.active, #move_mark a:hover {
  color: #333;
}

#move_back {
  margin: 0 10px;
  position: absolute;
  bottom: 0;
  left: 0;
}

#move_next {
  margin: 0 10px;
  position: absolute;
  bottom: 0;
  right: 0;
}

4. Initialize the carousel.

var acarousel = $("#carousel").acarousel();

5. Enable the carousel to switch between images by clicking image links.

$("#carousel li a").click(function() {
  if (acarousel.isAnim()) return false;
  var move = acarousel.moveByElem($(this).parent());
  if (move == 0) {
    alert("Click Selected Element");
  } else {
    changeActive(move);
  }
  return false;
});

6. Enable the pagination controls.

function changeActive(move) {
  var index = acarousel.getPos(move).index;
  $(".move").removeClass("active").eq(index).addClass("active");
}
changeActive();

$(".move").click(function () {
  if (acarousel.isAnim()) return false; 
  var index = $(".move").index(this);
  var move = acarousel.moveByIndex(index);
  changeActive(move);
  return false;
});

7. Enable the navigation controls.

$("#move_back").click(function () {
  if (acarousel.isAnim()) return false; 
  var move = acarousel.move(1);
  changeActive(move);
  return false;
});

$("#move_next").click(function () {
  if (acarousel.isAnim()) return false; 
  var move = acarousel.move(-1);
  changeActive(move);
  return false;
});

8. Default options and callback functions.

var acarousel = $("#carousel").acarousel({

    // whether to minimize the movement amount.
    move_minimum: false,

    // callbacks
    moveBefore: function () {}, 
    moveStep: function (elem, index, pos_index, t) {}, 
    moveAfter: function () {}
    
});

9. API methods.

// re-init the carousel
acarousel.init();

// move to a specific image
acarousel.move(move_pos, duration, easing);
acarousel.moveByIndex(index, duration, easing);
acarousel.moveByElem(elem, mduration, easing);

// enable autoplay
acarousel.slide(duration);

// stop autoplay
acarousel.stop();

// check if is moving
acarousel.isAnim();

// get the number of images
acarousel.count();

// return the current position information
acarousel.getPos(offset);

---

This awesome jQuery plugin is developed by kozok-dev. For more Advanced Usages, please check the demo page or visit the official website.