[Animation] Specialized JQuery Carousel Plugin | acarousel


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>

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>  

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 {
  return false;

6. Enable the pagination controls.

function changeActive(move) {
  var index = acarousel.getPos(move).index;

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

7. Enable navigation controls.

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

$("#move_next").click(function () {
  if (acarousel.isAnim()) return false; 
  var move = acarousel.move(-1);
  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

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

// enable autoplay

// stop autoplay

// check if is moving

// get the number of images

// return the current position information

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

See Demo And Download

Official Website(kozok-dev): Click Here

This superior jQuery/javascript plugin is developed by kozok-dev. For extra Advanced Usages, please go to the official website.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…