Spice Up Your Galleries with jQuery clickCarousel Plugin

Spice Up Your Galleries with jQuery clickCarousel Plugin

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.

Spice Up Your Galleries with jQuery clickCarousel Plugin

[tut demo=”http://www.onextrapixel.com/examples/jquery-click-carousel-plugin/” download=”http://www.onextrapixel.com/examples/jquery-click-carousel-plugin/clickCarousel.zip”]

Plugin Implementation

jQuery clickCarousel Plugin
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 }); 

[tut demo=”http://www.onextrapixel.com/examples/jquery-click-carousel-plugin/” download=”http://www.onextrapixel.com/examples/jquery-click-carousel-plugin/clickCarousel.zip”]

Conclusion

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!

Joseph McCullough is the lead developer of Vert Studios, a local web design company located in Tyler, Texas. He spends most of his free time looking for missing semicolons.

Comments

  1. / Reply

    Thanks for article :)

  2. / Reply

    Nice and clean! Great!! Thank you for sharing!

    • Ryan,
    • October 6, 2010
    / Reply

    Awesome plugin! Thanks for sharing!

  3. / Reply

    Haha.. very cool stuff… will throw it in some coming projects for sure!

  4. / Reply

    Awesome post! thanks a lot for sharing..

  5. / Reply

    Thanks for sharing, will keep it in mind for the future.

  6. / Reply

    Nice plugin, I must try it…
    Thanks for share

  7. / Reply

    Nice JQuery implementation, the demo doesn’t look bad. Thanks for the plugin.

  8. Wonderful JQuery implementation with demo. Thanks for your smart helpful effort. Thanks again for sharing with us

    • Paul,
    • April 29, 2011
    / Reply

    Joseph,

    Love the post. I was wondering what I could do to make the images in the slider clickable and take me to another url when clicked.

    Thanks,
    Paul

  9. / Reply

    Nice plugin!!!
    Thanks!!!)

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.