Spice up your galleries with this infinite carousel that uses an eye catching retract effect. This plugin is not only easy to implement, but it takes advantage of a convenient method called .fakeFloat(), which positions elements based on their position within the jQuery object itself. Using this method, simply array processing takes care of the carousel effect.

Plugin Implementation

Image credit: cubagallery

.clickCarousel (Properties)

Property Options:

• direction: The direction the carousel will shift. Valid arguments are the string "left" and "right". Default value: "left"
• margin: The space between the shifting elements in pixels. Argument should be an integer. Default value: 0
• hideSpeed: How long the retracting element takes to retract in milliseconds. Default value: 500
• shiftSpeed: How long the elements take to shift in milliseconds. Default value: 500
• shifting: The elements that will shift and/or retract in the carousel. Default value: The children of the object that calls .clickCarousel.
• clicker: A jQuery object that represents what element(s) will trigger the retraction effect when clicked. Default value: The shifting elements themselves
• shiftOnly: A boolean variable that deactivates the retract function of the carousel when set to true. Default value: false
• left: A jQuery object that represents what element(s) will cause the carousel to shift left when clicked. Default value: $("#carouselLeft");
• right: A jQuery object that represents what element(s) will cause the carousel to shift right when clicked. Default value: $("#carouselRight");

CSS

A div must act as a container for the carousel, and that div must contain the overflow: hidden style, a set width and height, and position: relative (or absolute if you want the carousel positioned absolutely as well). Additionally, the elements that will be shifting (what you set as the shifting property) should be positioned absolutely with a top value of 0.

Let's say my carousel container will be #container. My shifting elements will be img elements in container, which are 150px x 150px. The CSS to represent this scenario would be:

#container { position: absolute; top: 10px; left: 60px; overflow: hidden; height: 150px; width: 450px; /* 3 images of 150px showing = 3*(150) = 450*/  }

#container img { position: absolute; top: 0px; height: 150px; width: 150px; cursor: pointer; overflow: hidden; } 

#carouselLeft { position: absolute; top: 60px; left: 0px; cursor: pointer; } 

#carouselRight { position: absolute; top: 60px; left: 540px; cursor: pointer; }

HTML

The corresponding HTML is as follows:

<div id="wrapper">
    <div id="container">
		<img src="img1.jpg" alt="Cuba" />
		<img src="img2.jpg" alt="Cuba" />
		<img src="img3.jpg" alt="Cuba" />
		<img src="img4.jpg" alt="Cuba" />
		<img src="img5.jpg" alt="Cuba" />
    </div><!-- container -->
    <img id="carouselLeft" src="leftArr.jpg" alt="Left Arrow" />
    <img id="carouselRight" src="rightArr.jpg" alt="Right Arrow" />
</div><!-- wrapper -->

JavaScript

There are numerous ways to customize the click carousel. However, be aware that some changes (such as adding a margin) may require you to change your container CSS.

//Most basic function call that uses all default values.
$("#container").clickCarousel(); 

//Slow down the shiftSpeed and hideSpeed to take 1 second, and make the carousel shift with respect to the right direction.
$("#container").clickCarousel({ direction: "right", shiftSpeed: 1000, hideSpeed: 1000 }); 

//Disable the retraction effect and only allow the carousel to slide. Additionally, make the boxes themselves be what trigger the slide to the left, and disable the right slider.
$("#container").clickCarousel({ shiftOnly: true, left: $(".box"), right: null }); 

//Add a margin between the shifting elements, speed up the shiftSpeed and hideSpeed animations to 200ms, and make the carousel shift in respect to the right direction. Also note that the container's width should be expanded by 30 to take into account the margin.
$("#container").clickCarousel({ margin: 10, direction: "right", shiftSpeed: 200, hideSpeed: 200 });

I hope the above have given you a clear view on how to implement the script. If there is any questions, comments or bugs, please leave your feedback in the comments section below!