1. INCLUDE JS FILES
<script type="Text/Javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
2. HTML
<div id="slider" >
<div><img src="../images/01.jpg"/></div>
<div>Some other content</div>
<div><img src="../images/03.jpg" alt="image description"/></div>
</div>
3. JAVASCRIPT
var sudoSlider = $("#slider").sudoSlider({
numeric: true
});
4. OPTIONS
$("#slider").sudoSlider({
effect: "slide",
speed: 1500,
customLink: false,
controlsShow: true,
controlsFadeSpeed: 400,
controlsFade: true,
insertAfter: true,
vertical: false
slideCount: 1,
moveCount: 1,
startSlide: 1,
responsive: false,
ease: "swing",
auto: false,
pause: 2000,
resumePause: false,
continuous: false,
prevNext: true,
numeric: false,
numericText: [],
slices: 15,
boxCols: 8,
boxRows: 4,
initCallback: function () {},
destroyCallback: function () {},
ajaxLoad: function () {},
beforeAnimation: function () {},
afterAnimation: function () {},
history: false,
autoHeight: true,
autoWidth: true,
updateBefore: false,
ajax: false,
preloadAjax: 100,
loadingText: "",
prevHtml: '<a href="#" class="prevBtn"> previous </a>',
nextHtml: '<a href="#" class="nextBtn"> next </a>',
controlsAttr: 'class="controls"',
numericAttr: 'class="numericControls"',
interruptible: false,
useCSS: true,
loadStart: function () {},
loadFinish: function () {},
touch: false,
touchHandle: false
});
5. METHODS
// Returns the value of the option "effect".
var fade = sudoSlider.getOption("effect");
// Set the option effect to fade
sudoSlider.setOption("effect", "fade");
// Sets the effect to fade and enables touch
sudoSlider.setOption({effect: "fade", touch: true});
// The content is inserted after the second slide.
sudoSlider.insertSlide('<p>This is some content</p>', 2, 'Content 3');
// The second slide is removed.
sudoSlider.removeSlide(2);
// The slider animates to slide number 3 in 500 miliseconds.
sudoSlider.goToSlide(3, 500);
// Returns the jQuery object for the 2nd slide
var slide = sudoSlider.getSlide(2);
// User input is blocked (the controls)
sudoSlider.block();
// User input is unblocked.
sudoSlider.unblock();
// Starts a slideshow.
sudoSlider.startAuto();
// Stops an automatic slideshow.
sudoSlider.stopAuto();
// Adjusts the slider, if anything has been changed (like the image size).
sudoSlider.adjust();
// The slider is destroyed.
sudoSlider.destroy();
// Build it again.
sudoSlider.init();
// Returns the current slide number (starts from 1).
var currentSlide = sudoSlider.getValue('currentSlide');
// Returns the total number of slides.
var totalSlides = sudoSlider.getValue('totalSlides');
// Returns if the slider is currently clickable (true/false).
var clickable = sudoSlider.getValue('clickable');
// Returns if the slider is currently destroyed (true/false).
var destroyed = sudoSlider.getValue('destroyed');
// Returns if the slider is currently running an automatic slideshow (true / false).
var destroyed = sudoSlider.getValue('autoAnimation');
// Alerts "Done" when the slider is not animating. Runs immidiatly if the slider is idle.
sudoSlider.runWhenNotAnimating(function () {alert("Done");});
// Stop the current animation (if one is running).
sudoSlider.stopAnimation();
JS Tutorial
