Dynamic 3D image circular carousels jQuery Plugin to Create Banner Rotator

Dynamic 3D image rotator with next and previous button

0 224

Circular Carousel is a simple jQuery plugin for creating a dynamic 3D image rotator with next and previous button. useful for making 3D banner rotator or and product rotation banner on your website.

Creating 3D Image Rotator Banner

Libraries

Include required plugins libraries on page, don’t forget to add jquery core library first because this plugin dependent on jQuery.

<!--CSS-->
<link rel="stylesheet" href="jquery.circular-carousel.css">
 
<!--JS-->
 <script src="//code.jquery.com/jquery-latest.min.js"></script>
 <script src="jquery.circular-carousel.js"></script>

HTML

Create a simple HTML unordered list with class name carousel which act like 3D rotator. add class active on which li element need to start rotation first.

 <ul class="carousel">
        <li class="item active"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
      </ul>

Now create next previous link inside controls class so that you can move 3D carousel.

<div class="controls">
      <a href="#" class="previous">Previous</a>
      <a href="#" class="next">Next</a>
    </div>

JS

Finally initialise the plugin to make 3d carousel in action.

$(function() { 
  var carousel = $('.carousel').CircularCarousel(options);
});

Here are the list of options you can pass to customise 3D carousel

$(function() { 
  var carousel = $('.carousel').CircularCarousel({
                        ovalWidth: 400,
			ovalHeight: 50,
			offsetX: 100,
			offsetY: 325,
			angle: 0,
			activeItem: 0,
			duration: 350,
			className: 'item'});
});

Enable next previous controls.

$(function() { 
  var carousel = $('.carousel').CircularCarousel({
                        ovalWidth: 400,
			ovalHeight: 50,
			offsetX: 100,
			offsetY: 325,
			angle: 0,
			activeItem: 0,
			duration: 350,
			className: 'item'});
 
            /* Previous button */
		$('.controls .previous').click(function(e) {
			carousel.cycleActive('previous');
			e.preventDefault();
		});
 
		/* Next button */
		$('.controls .next').click(function(e) {
			carousel.cycleActive('next');
			e.preventDefault();
		});
});

Following are the list of events you can perform some needful action.

/* Fires when an item is about to start it's activate animation */
carousel.on('itemBeforeActive', function(e, item) {
	//do something with $(item)
});
 
/* Fires after an item finishes it's activate animation */
carousel.on('itemActive', function(e, item) {
	//do something with $(item)
});
 
/* Fires when an active item starts it's de-activate animation */
carousel.on('itemBeforeDeactivate', function(e, item) {
	//do something with $(item)
})
 
/* Fires after an active item has finished it's de-activate animation */
carousel.on('itemAfterDeactivate', function(e, item) {
	//do something with $(item)
})

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Leave A Reply

Your email address will not be published.