JavaScript methods

The public methods will allow you to manipulate the slider using external controls. This is a very useful capability if you want to integrate the slider with other applications.

Method NameDescription
nextSlide() Opens the next slide.
previousSlide() Opens the previous slide.
gotoSlide(index) Opens the slide at the specified index.
startSlideshow() Starts the slideshow mode.
stopSlideshow() Stops the slideshow mode.
pauseSlideshow() Pauses the slideshow.
resumeSlideshow() Resumes the slideshow.
scrollToThumbnailPage() Moves the thumbnail scroller to the specified page.
scrollToNextThumbnailPage() Moves the thumbnail scroller to the next page.
scrollToPreviousThumbnailPage() Moves the thumbnail scroller to the previous page.
startThumbnailMouseScroll() Starts the mouse scrolling functionality.
stopThumbnailMouseScroll() Stops the mouse scrolling functionality.
startThumbnailMouseWheel() Starts the mouse wheel functionality.
stopThumbnailMouseWheel() Stops the mouse wheel functionality.
doSliderLayout() Forces the slider to re-position all elements. The position of the elements depends on the specified width, height, scaleType and alignType.
getSlideshowState() Gets the current slideshow state. Returns 'playing', 'paused' or 'stopped'.
getCurrentIndex() Gets the index of the current slide.
getSlideAt(index) Gets all the data of the slide at the specified index. Returns an object that contains all the data specified for that slide.
getTriggerType() Returns a string that indicates what triggered the slider to navigate to a different slide. Possible values are: 'none', 'previousButton', 'nextButton', 'button', 'slideshow' and 'thumbnail'.
isTransition() Checks if the slider is in the transition phase. Returns true or false.
totalSlides() Returns the total number of slides.
getSize() Returns an object that contains the width and height of both the slider and the slide. The returned object has the following properties: sliderWidth, sliderHeight, slideWidth and slideHeight.
destroy() Stops all running actions. It's recommended to call this method before removing the slider from the DOM.

 

In the code example below, you can see that we use 2 external buttons to navigate to the previous and to the next slide. As you can notice, first we need to assign the slider instance to a variable, in this example: 'slider', and then we use that variable to call the slider methods that we want.

<script type="text/javascript">     
    var slider;
	
    jQuery(document).ready(function($) {
        slider = $('#my-slider').advancedSlider({
            width: '100%',
            height: 400,
            horizontalSlices: 8,
            verticalSlices: 4,
            thumbnailsType: 'scroller',
            visibleThumbnails: 4
        });
    });
	
    function previous() {
        slider.previousSlide();
    }	
	
    function next() {
        slider.nextSlide();
    }
</script>
     
</head>
     
<body>
    <input type="button" value="Previous Slide" onclick="previous();"/>
    <input type="button" value="Next Slide" onclick="next();"/>
</body>
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk