responsive

getSlidesCount()

  • Available since: v1.2
  • Type: public method
  • Returns: Number

Method returns number of slides.

Method calling

1) Method can be called inside every callback (as demonstrated in demo 1):

this.getSlidesCount();

2) In case there is only one HTML element matching the selector, method can be called anywhere in your code (as demonstrated in demo 2):

$('selector').data('jAccordion').getSlidesCount();

3) In case there are more HTML elements matching the selector, method can be called anywhere in your code (eq(index) specifies index of accordion instance):

$('selector').eq(index).data('jAccordion').getSlidesCount();

Demo 1

  • 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({
		onReady : function() {
			$('.preloader', this.$accordion).remove();
			alert('Accordion has ' + this.getSlidesCount() + ' slides.');
		}
	});
});

Demo 1 demonstrates how to call the described method inside callback attached to event onReady (the protocol is the same for all callbacks). Number of slides is displayed below accordion after it's fully loaded.

Loading content...
slide1
slide2
slide3
slide4
slide5

Demo 2

  • 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>
<button id="demonstrationBtn" disabled="disabled">Loading...</button>
jQuery(document).ready(function( $ ) {
	$('.accordion').jAccordion({
		onReady : function() {
			$('.preloader', this.$accordion).remove();
			$('#demonstrationBtn').text('Get number of slides').removeAttr('disabled');
		}
	});
	
	$('#demonstrationBtn').click(function() {
		alert("Accordion has " + $('.accordion').data('jAccordion').getSlidesCount() + " slides.");
	});
});

Demo 2 demonstrates how to call the described method anywhere in your code.

Loading content...
slide1
slide2
slide3
slide4
slide5

jAccordion by maniacpc, exclusively for CodeCanyon