Versatile jQuery Slider Plugin - SudoSlider

File Size: 2.26 MB
Views Total: 7565
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Versatile jQuery Slider Plugin - SudoSlider

SudoSlider is a versatile jQuery slider Plugin that helps you create multiple functional sliders with built-in options and methods as you need.

Features:

  • Auto width and height
  • 134+ transition effects
  • Callback support
  • Multiple Sliders support
  • Rich content support
  • Ajax content support
  • Touch enabled
  • Keyboard navigation support
  • Responsive design
  • For more features, please check 45+ examples in the DEMO fold.

Basic Usage:

1. Include the latest jQuery library and SudoSlider.js on your web page

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.sudoSlider.min.js"></script>

2. Add slides to the slider.

<div id="slider" >
  <ul>
    <li><img src="1.jpg" alt="image description"/></li>
    <li><img src="2.jpg" alt="image description"/></li>
    <li><img src="3.jpg" alt="image description"/></li>
    <li><img src="4.jpg" alt="image description"/></li>
    <li><img src="5.jpg" alt="image description"/></li>  
  </ul>
</div>

3. The necessary CSS styles.

#slider, #slider li {
  width:696px;
  overflow:hidden; 
}

#slider img{
  border:none;
}

#slider ul, #slider li{
  position:relative;
  margin:0;
  padding:0;
  list-style:none;
  display:block;
}

5. Call the plugin with default options.

$(document).ready(function(){
  var sudoSlider = $("#slider").sudoSlider();
});

6. Advanced usages.

// 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();

7. All available options.

/* Check out the
   http://webbies.dk/SudoSlider/help/#Settings
   for full document.
*/

effect: "slide",
speed: 1500,
customLink: FALSE, 
controlsFadeSpeed: 400, 
controlsFade: TRUE, 
insertAfter: TRUE, 
vertical: FALSE, 
slideCount: 1,
moveCount: 1,
startSlide: 1,
responsive: TRUE,
ease: SWING, 
auto: FALSE,
pause: 2000,
resumePause: FALSE,
continuous: FALSE,
prevNext: TRUE,
numeric: FALSE, 
numericText: [], 
slices: 15, 
boxCols: 8, 
boxRows: 4, 
initCallback: EMPTY_FUNCTION,
ajaxLoad: EMPTY_FUNCTION, 
beforeAnimation: EMPTY_FUNCTION, 
afterAnimation: EMPTY_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: EMPTY_FUNCTION,
loadFinish: EMPTY_FUNCTION, 
touch: FALSE,  
touchHandle: FALSE,
destroyCallback: EMPTY_FUNCTION,  
mouseTouch: TRUE, 
allowScroll: TRUE, 
CSSease: SWING,
ajaxHasHTML: FALSE,
performanceMode: 0

Changelog:

v3.5.1 (01/27/2021)

  • Changed the "slide" animation to use margins instead of "translate(...)".
  • Fixing an animation issue in Chrome 88.

2018-07-24

  • Improved page performance when enabling touch. But re-working how the events are registered
  • Added performanceMode option. Can be used to hide slides that are invisible anyway, and reset the CSS if the slider is not currently animating. Can increase performance, especially if on mobile and there are multiple sliders on a single page
  • Removed nested sliders demo
  • Removed css effects demo

2016-06-11

  • More touch fixing.

2016-05-27

  • Fixed some subpixel precision problems in Firefox when rezizing and having multiple slides visible. 

2016-05-25

  • v3.4.9

2016-03-03

  • Fixing an issue where calling setOptions() or similar multiple times after another, caused problems with touch.

2016-02-29

  • v3.4.6

2016-02-28

  • Change in script: Added a the possibility of prefixing customLinks with ">", to have the links only work within the context of the slider.

2016-01-22

  • Fixed issue in the Microsoft Edge browser, where it sometimes crashed.

2015-08-20

  • Fixing touch in FireFox 

v3.4.1 (2015-03-31)

  • Change in script: Changed the default value of "mouseTouch" to true, meaning that if you enable touch, mouse-dragging also work pr. default.
  • Change in script. Added a "speed" argument in the end of beforeAnimation. Since the animation speed isn't always the option speed (e.g. touch animations).
  • Change in demos: Added the "partial sides" demo.
  • Change in script: A class "sudoSlider-dragging" is added to the body while the user is dragging an element.
  • Change in script: Prefixing touchHandle with ">" (like "> img"), will limit the touchHandle to select within the slider.
  • Change in script: startSlide can now be set to a new special value "random", which will make it select a random of the slides.
  • Change in script: fixed a bug when interruptible and history was used.

v3.4.0 (2015-01-28)

  • Change in demos: Fixed that the fullscreen demo bugged when putting the window in "portrait" mode.
  • Change in script: Resetting the position using margins and translate when slider is initialized.
  • Change in script: The setOption method no longer accepts an object of options, that behaviour is now in the new setOptions method.
  • Change in script: Added the sudoSlider object as an extra argument to the callback: ajaxload, afteranimation and beforeanimation. The other functions already has it as "this".
  • Change in script: If you have a single tag with class="slidesContainer" under the SudoSlider element, all the slides can (and will) be placed under that element.
  • Change in script: The method "adjust" now adjusts twice, first time when its called, and a second in a 0ms timeout.
  • Change in script: Removed the controlsShow option, since it was redundant.
  • Change in script: A factory method that returns the default options is now available at $.fn.sudoSlider.getDefaultOptions
  • Change in script: Fixed some handlers that wasn't unbound when the slider was destroyed.
  • Change in script: Fixed 2 bugs relating to height/width adjustments while an animation is running.
  • Change in script: Auto is now stopped when destroying (but will start again on init if the option is still true).
  • New: Added the SliderBuilder, that can be used to build a slider, and test out options.
  • Change in demos: Removed the navigation in slider demo.
  • Change in demos: Removed the tabs 2 demo.

v3.3.2 (2014-10-21)

  • Change in script: Touch now works well when you slide across multiple slides, that includes if slideCount > 1.
  • Change in script: Added a new option CSSease, so you can set the ease used for CSS and JavaScript animations separately.

v3.3.1 (2014-10-05)

  • Change in script: Added the mouseTouch option (thanks to foobear). That pr. default disables that mouse input acts as touch input when touch is enabled.
  • Change in script: Changed the way scrolling is allowed when using touch on a touch device (thanks to foobear).
  • Change in script: Added allowScroll option, so you can disable the behaviour that allows scrolling while dragging the slider using touch.
  • Change in docs: Removed the ticker mode demo.
  • Change in script: Fixed an of by one alignment problem, caused by some CSS.
  • Change in script: Improved animation startup time for all animations where boxes or slices are animated in (so when they fade in, slide in, grow in etc.).
  • Change in script: Responsive option is now true as default.
  • Change in docs: Added the "touch and links" demo. Showcasing links inside a slider that you can move around using touch.
  • Change in script: You can have wildcards when specifying effect. So "box*Grow*" chooses randomly between every effect matching that.
  • Change in script: No more ugly z-index when doing animations.
  • Various fixes. Including some Old-IE fixes.

v3.3.0 (2014-06-24)

  • Change in script: Fixed that an empty slider didn't work, and that ajaxloaded images would load wrong in some situations.
  • Change in script: Added a new option: "touch". When enabled you can swipe the slider back and forwards using mouse of touch input.
  • Change in script: Changed the touch demo from using touchSwipe to using the new option. Also removed touchSwipe script from the js/lib/ folder.
  • Change in script: Added the touchHandle option. So you can specify what the user can drag. Even something that isn't within the slider.
  • Change in docs: Added touchHandle demo.
  • Change in docs: Added touchHandle outside slider demo.
  • Change in docs: Added fullscreen demo.
  • Change in script: Fixed that continuous with ajax content bugged.
  • Change in script: InsertSlide now accepts negative number for positions. -1 equals inserting a slide in the far right of the slider, -2 one left of that etc.
  • Change in script: The setOption method now also accepts an object, that represents option names and option values to be changed.
  • Change in docs: Removed the "Responsive height/width", "flashlike" and "fade not crossfade" demo.
  • Change in script: The controls container now has class="controls" instead of id="controls". And the container for the numeric controls has class="numericControls" instead of class="controls". These are just new default option values, they can easily be changed through options.
  • Change in script: The container that has the slide now has class="slidesContainer" and each slide has class="slide"
  • Change in script: Added a destroyCallback option. It is called after the slider has been destroyed (that includes when options are changed).
  • Change in script: New effects, added optional suffix "Rounded" to all grow effects. Try it out in the all effects demo. Now 132 effects.
  • Change in script: Fixed that when preloadAjax was false, nothing except the first slide was ever loaded. And other problems related to Ajax.
  • Change in script: The auto animation pauses when responsive is on and the window is resized.
  • Change in script: Remove the animationZIndex option. Now the z-index of the overlaying animation is found more intelligently.

v3.2.2 (2014-02-11)

  • Change in script: Made the dirty fix in 3.2.1 into a clean one.
  • Change in script: Fixed that ajaxLoaded slides were wrapped in an <li> when they should be wrapped in a <div> (and the other way).
  • Change in script: Numeric controls now also use data-target instead of rel attribute.
  • Change in docs: The explorer effects demo shows, when you select a prefix, what effects that prefix hits.

v3.2.1 (2014-02-09)

  • Change in script: Before when using continuous, i would clone some of the slides, to make sure that even if you scrolled further than the last slide, then there were still something to show. Now i instead reorder the slides before an animation.
  • Change in demos: Removed the "responsive fixed width slides" demo.
  • Change in script: When using customLinks, the script now looks after a "data-target" to see what the customLink is supposed to do. "rel" attribute still works for backwards comparability.
  • Change in script: Fixed that when using ticker mode (auto with pause 0 and continuous), the slider would sometimes start by animating frot the last to the first slide, then jump to the second.
  • Change in script: Renamed the push effects to pushOut. And introduced the pushIn and stack effects. Now there's 118 effects.
  • Change in script: Fixed flicker in some effects in 3.2.0

v3.1.7 (2013-12-18)

  • Change in script: Fixed that <li> tags were always used to fill in the non-existing slides if ajax is on. In some sliders we want <div>'s.
  • Change in script: Fixed weird Firefox bug. (If you have a responsive slider, the slider might "push" the rest of the content down while initializing, it is moved back into place before anything is renders, but Firefox still goes crazy)
  • Change in script: Decreased the time it takes to initialize a responsive slider in some browsers.
  • Change in script: Fixed that a responsive slider sometimes adjusted as if there were a scrollbar, while there isn't a scrollbar.
  • Change in demos: Added the responsive height/width demo, that shrinks in both width and height.

v3.1.6 (2013-11-29)

  • Change in script: You can now specify the pause between slides pr. slide. Just set the "data-pause" attribute on the slide. See the auto.html demo.
  • Change in script: Fixed that the insertSlide didn't work well when the slide container wasn't an "<ul>".

v3.1.5 (2013-11-18)

  • Change in script: When sliding to the next or previous, the slider will no longer go the other way, even if that path is shorter. (Thanks sjaakmans https://github.com/webbiesdk/SudoSlider/issues/4 )
  • Change in script: exposed runWhenNotAnimating as a public method.

v3.1.0 (2013-07-19)

  • Change in script: Added a goToNext() method when making your own effects. By calling this the slider will instantly go to the next slide, and you can continue the effect afterwards.
  • Change in script: Removed the boxes and boxesGrow effects.
  • Change in script: Changed the remaining box effects, so that when they grow (in/out) the movement originates from the center.
  • Change in script: Added a whole bunch of new effect. And renamed some of the existing effects. (Now there is 105 effects).
  • Change in docs: Changed the explorer effects, to show the effects in a nicer way. The old explorer effects is now "all effects".
  • Change in script: If you specify the attribute "data-effectout" on a slide, that will specify the effect when leaving that slide. The data-effectout takes precedence over data-effect.
  • Change in script: Added interruptible option, by setting it to true, the current animation will be interrupted if the slider is told to go to another slide. (This is a reintroduction of the option that was previously called clickableAni).
  • Change in script: If you set an effect like "box" it will result in a random effect that chooses between all effects starting with "box". This work for all strings that doesn't hit a specific effect.
  • Change in script: Fixed that the slider sometimes tried to animate to the next slide, before it had finished the first one. (If you clicked while the slider was animating).
  • Change in script: Fixed that the slider would flicker in some browsers when using startSlide > 1 and AJAX.
  • Change in script: All effects now take exactly the amount of time specified in the options to complete.
  • Change in script: Changed the default speed to 1500.
  • Change in script: Fixed that Ajax loaded images in some browsers where forced to have the images original resolution (overwriting any CSS rules).
  • Change in script: Added a speed argument to the goToSlide method.
  • Change in script: Fixed that the autoHeight/width animation didn't take the amount of time specified in the attribute data-speed.
  • Change in script: Using all CSS animations pr default, with JavaScript animations as a fallback. This means that the easing option (if used) should be adjusted to work with CSS transformations (or disable the CSS transformations). The default "swing" ease is automaticly converted to a "cubic-bezier"
  • Change in script: Added the useCSS option, which can be used to turn off CSS animations.
  • Change in script: When the next/prev controls are hidden, it is done using visibility:hidden instead of display:none.
  • Change in script: Added the loadStart and loadFinish options. They are callbacks that run when the sliders waits with an animation because a slide (or more) isn't loaded. (Note: Not at init).
  • Change in script: If history is enabled, the update of URL will now be performed in the beginning of the animation, instead of the end.
  • Change in docs: Upgraded to jQuery 1.10.2
  • Change in docs: Removed the "keep slider focused demo".

This awesome jQuery plugin is developed by webbiesdk. For more Advanced Usages, please check the demo page or visit the official website.