[Animation] Specialized JQuery Carousel Plugin

This jQuery plugin creates a carousel-style navigation for images. Acarousel.js is a tiny plugin to create a canopy stream model picture carousel for the online. It permits the user to scroll between photos by clicking siblings, and focuses on one picture at a time, by centering and enlarging it within the view.

Key Feature:

Animation is possible in API form.
Since it is an API format, you can freely set up arrow buttons and click items to perform actions.
Since only minor changes to the pattern are made, it is possible to apply patterns that have already been created.
Each item can use the position specified in the style sheet as is.
It works with browsers like Chrome, Firefox, IE6 +, and smartphones.

How to make use of it:

1. Add a listing of photos to the carousel container.

<div id="carousel_container">
  <ul id="carousel">
    <li id="c1"><a href="#"> Add Image Here</a></li>
    <li id="c2"><a href="#"> Add Image Here</a></li>
    <li id="c3"><a href="#"> Add Image Here</a></li>
    <li id="c4"><a href="#"> Add Image Here</a></li>
    <li id="c5"><a href="#"> Add Image Here</a></li>
    ...
  </ul>
</div>

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

<div id="move_mark">
  <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>
  <div id="move_back"><a href="#">←</a></div>
  <div id="move_next"><a href="#">→</a></div>  
</div>

3. The instance 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 change between photos by clicking picture 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 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 features.

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

// 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);

Cover Flow Style Carousel For The Web, 3D Cover Flow-Style Image Carousel, acarousel Github