Demo

• HTML
• JS

<div class="accordion noJS">
	<div class="preloader">Loading content...</div>
	<div class="jAccordion-slidesWrapper">
		<div class="jAccordion-slide"><img src="images/banner1.png" width="910" height="380" alt="slide1" /></div>
		<div class="jAccordion-slide"><img src="images/banner2.png" width="910" height="380" alt="slide2" /></div>
		<div class="jAccordion-slide"><img src="images/banner5.png" width="910" height="380" alt="slide3" /></div>
		<div class="jAccordion-slide"><img src="images/banner3.png" width="910" height="380" alt="slide4" /></div>
		<div class="jAccordion-slide"><img src="images/banner4.png" width="910" height="380" alt="slide5" /></div>
	</div>
</div>

jQuery(document).ready(function( $ ) {
	$('.accordion').jAccordion({
		autoplay : true,
		pauseOnHover : true, //You don't even have to set this property because 'true' is default value
		onReady : function() {
			$('.preloader', this.$accordion).remove();
			alert('Accordion is ready, preloader has been removed.');
		},
		onSlideOpened : function(e) {
			alert('Slide ' + e.index + ' is completely open.');
		},
		onSlideStartOpening : function(e) {
			alert('Opening of slide ' + e.index + ' has just started.');
		},
		onSlideStartClosing : function(e) {
			alert('Closing of slide ' + e.index + ' has just started.');
		},
		onAccordionMouseEnter : function() {
			alert('Cursor has just entered accordion.');
		},
		onAccordionMouseLeave : function() {
			alert('Cursor has just left accordion.');
		},
		onPause : function() {
			alert('Autoplay paused.');
		},
		onResume : function(e) {
			alert('Autoplay resumed: ' + e.remainingTime + 'ms left.');
		}
	});
});