Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it’s got lots of cool features.
Here on CSS-Tricks, I’ve created a number of different sliders. Three, in fact. A “featured content” slider, a “start/stop slider”, and “moving boxes”. Each of them had some cool interesting feature that I needed to build at the time. All were well-received, but as is the case with these things, people want them to do X, Y, and Z in addition to what they already did.
This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really “full featured” slider that could be widely useful. This is the first time (on CSS-Tricks) that one of these sliders is an actual plugin as well, which should make implementing it and customizing it much easier.
- Panels are HTML Content (can be anything).
- Multiple AnythingSliders allowable per-page.
- Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide).
- Optionally resize each panel (specified per panel in css).
- Optional Next / Previous Panel Arrows.
- Use keyboard navigation or tabs that are built and added dynamically (any number of panels).
- Link to specific slides or go forward or back one slide from static text links.
- Each panel has a hashtag (can link directly to specific panels).
- Optional custom function for formatting navigation text.
- Auto-playing slideshow (optional feature, can start playing or stopped)
- Pauses playing YouTube videos when not in view and resumes them when in view (if files are hosted on the web).
- If slideshow is active, a playing video will complete before the slideshow continues.
- Pauses slideshow on hover (optional).
- Optionally play the slideshow once through, stopping on the last page.
$('#slider1, #slider2').anythingSlider({
// Appearance
width : null, // Override the default CSS width
height : null, // Override the default CSS height
resizeContents : true // If true, solitary images/objects in the panel will expand to fit the viewport
tooltipClass : 'tooltip', // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
theme : 'default', // Theme name
themeDirectory : 'css/theme-{themeName}.css', // Theme directory & filename {themeName} is replaced by the theme value above
// Navigation
startPanel : 1, // This sets the initial panel
hashTags : true, // Should links change the hashtag in the URL?
buildArrows : true, // If true, builds the forwards and backwards buttons
toggleArrows : false, // if true, side navigation arrows will slide out on hovering & hide @ other times
buildNavigation : true, // If true, builds a list of anchor links to link to each panel
toggleControls : false, // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
navigationFormatter : null, // Details at the top of the file on this use (advanced use)
forwardText : "»", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
backText : "«", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
// Slideshow options
autoPlay : true, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
startStopped : false, // If autoPlay is on, this can force it to start stopped
pauseOnHover : true, // If true & the slideshow is active, the slideshow will pause on hover
resumeOnVideoEnd : true, // If true & the slideshow is active & a youtube video is playing, it will pause the autoplay until the video is complete
stopAtEnd : false, // If true & the slideshow is active, the slideshow will stop on the last page
playRtl : false, // If true, the slideshow will move right-to-left
startText : "Start", // Start button text
stopText : "Stop", // Stop button text
delay : 3000, // How long between slideshow transitions in AutoPlay mode (in milliseconds)
animationTime : 600, // How long the slideshow transition takes (in milliseconds)
easing : "swing", // Anything other than "linear" or "swing" requires the easing plugin
// Callbacks
onShowStart : null, // Callback on slideshow start
onShowStop : null, // Callback after slideshow stops
onShowPause : null, // Callback when slideshow pauses
onShowUnpause : null, // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
onSlideInit : null, // Callback when slide initiates, before control animation
onSlideBegin : null, // Callback before slide animates
onSlideComplete : null, // Callback when slide completes
// Interactivity
clickArrows : "click", // Event used to activate arrow functionality (e.g. "click" or "mouseenter")
clickControls : "click focusin", // Events used to activate navigation control functionality
clickSlideshow : "click", // Event used to activate slideshow play/stop button
// Misc options
addWmodeToObject : "opaque", // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting, if swfobject.js is active
maxOverallWidth : 32766 // Max width (in pixels) of combined sliders (side-to-side); set to 32766 to prevent problems with Opera
});
<!-- Required -->
<link type="text/css" href="css/anythingslider.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
<script type="text/javascript">
$(function () {
$('#slider1').anythingSlider(); // add any non-default options here
});
</script>
<!-- Optional -->
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<ul id="slider1">
<li><div class="text">Put anything you want here</div></li>
<li><img src="image1.jpg" /></li>
<li><object>...</object></li>
<li>
<div class="list">
<h4>Title</h4>
<ul>
<li>List item #1</li>
<li>List item #2</li>
</ul>
</div>
</li>
</ul>
Setting current slide. External link example:
<a href=“#” id=“slide-jump”>Slide 4</a>
$(“#slide-jump”).click(function(){
$(‘#slider2’).anythingSlider(4);
});
$(‘#slider2’).anythingSlider(4);
});
External Slideshow Control
$(‘#slider1’).data(‘AnythingSlider’).startStop(true); // start the slideshow
$(‘#slider2’).data(‘AnythingSlider’).startStop(false); // stops the slideshow
$(‘#slider1’).data(‘AnythingSlider’).goForward(); // go forward one slide
$(‘#slider1’).data(‘AnythingSlider’).goBack(); // go back one slide
$(‘#slider2’).data(‘AnythingSlider’).startStop(false); // stops the slideshow
$(‘#slider1’).data(‘AnythingSlider’).goForward(); // go forward one slide
$(‘#slider1’).data(‘AnythingSlider’).goBack(); // go back one slide
Extending – Event Hooks (callback functions)
Note: Changed bind function returned arguments to make more straightforward values available, see callback arguments below.
slideshow_start(onShowStart) – slideshow started.slideshow_stop(onShowStop) – slideshow stopped.slideshow_paused(onShowPause) – slideshow paused.slideshow_unpaused(onShowUnpause) – slideshow unpaused – may not trigger properly or match a pause event if user clicks play/stop button.slide_init(onSlideInit) – triggered when panel slide is initialized (before controls animate).slide_begin(onSlideBegin) – triggered before panel slide animation.slide_complete(onSlideComplete) – triggered after panel slide animation.
You can bind to any of the custom event triggers as follows (see this page source for another example):
$('#slider1').bind('slide_complete', function(e, slider){
$('#status').text( 'Now on page #' + slider.currentPage );
// Do something else
});
$('.anythingSlider').bind('slideshow_start slideshow_stop', function(e, slider){
var msg = (e.type == "slideshow_start") ? 'Someone started the #^&%$! slideshow!' : 'Whew, thanks for stopping the slideshow';
$('#status').text( msg );
});
or use one of the callback functions:
$('#slider').anythingSlider({
onSlideComplete : function(slider){
alert('Welcome to Slide #' + slider.currentPage);
}
})
Callback Arguments ( examples are if you use “slider” in the callback function, e.g. function(slider){…}, or in the trigger function, e.g. function(e, slider){…} )
Callback Argument – Description
- slider.$currentPage – jQuery object of the Target page – not the same page as “slider.currentPage”.
- slider.$lastPage – jQuery object of the previous page – same page as “slider.currentPage” until “slide_complete” is called.
- slider.currentPage – Currently displayed page/slide number. Updated when the animation completes.
- slider.pages – Number of pages contained in the slider.
- slider.playing – Is true if the slideshow is currently playing (is false when slideshow is paused, but true while youtube video is playing).
- slider.hovered – Is true if the slider is currently being hovered.
- slider.options.{name} – Access any of the options (e.g. slider.options.theme). Trying to set the options this way may break the slider.
Formatting Navigation Text
To use the navigationFormatter option, you must have a function that accepts two parameters, and returns a string of HTML text.
index= integer index (1 based);panel= jQuery wrapped LI item this tab references- Function must return a string of HTML/Text
- Here is a sample formatter (view index.html page source for another example):
$(‘#slider’).anythingSlider({
navigationFormatter : function(index, panel){
return " Panel #" + index; // This would have each tab with the text ‘Panel #X’ where X = index
}
})
- Added jQuery Objects for
$currentPageand$lastPagewhich are accessible to the bind & callback functions for easy access to the pages. Added these callback arguments and more detail to the information above. - Improved the hash tag code so it will now work with multiple AnythingSliders on the page. The hash tag will still only update when clicking on the navigation links and not the navigation arrows.
- SWFObject script (swfobject.js) is now a required dependency to make YouTube videos pause when not in view & resume play when in view. This was added so IE will also have this functionality.
- Commented out previous code which added the above YouTube functionality to non-IE browsers. Will consider completely removing it if users are okay with the SWFObject script dependency.
- Added Curtis Scott’s Portfolio theme from his site. Thanks for sharing! – don’t use the control toggle option as it messes up the page layout.
- Fixed the flickering problem that was occuring when the slider moved from the last slide to the first.
- Added CSS to fix a problem with CSS3 transitions occurring during the animation. Added
noTransitionsclass to the arrows, navigation and slider. - Added callback functions:
onShowStart,onShowStop,onShowPause,onShowUnpause,onSlideInit,onSlideBegin&onSlideComplete. - Added instructions on callback argument useage as values and access to internal functions.
- Changed triggered event callback argument to make using them easier – see the Event Hooks section above.
- Added options to modify interactivity:
clickArrows,clickControls&clickSlideshow. - Added custom events – slideshow start, stop, pause & unpause as well as slide begin, start & stop. See the “Extending – Event Hooks” section above for a more detailed description.
- Updated instructions on how to use custom events.
- Added
addWmodeToObject. When a slider has an embedded object (like a youtube video), the script adds a wmode parameter with the value from this option (“opaque” by default).
- Added
themeoption and several themes. Themes can now be added to individual AnythingSliders (although they are based largely on CSS). - Added
tooltipClassoption which adds the assigned class name to the navigation and play/stop button only if the text is hidden (negative text-indent). The tooltip plugin must be added separately. - Added
toggleArrowsoption. This option (if true) will slide out (reveal) the arrows while hovering & hide them at other times. - Added
toggleControlsoption. This option (if true) will slide down (reveal) the navigation links and play/stop button while hovering & hide them at other times. Adding this option required a new “anythingControls” class that wraps both the navigation links and the play/stop button.
- Added
maxOverallWidthoption. This sets the max width (in pixels) of all combined sliders (side-to-side) due to problems with Opera. - Added new classes to the base UL (“anythingBase”) and its immediate children LIs (“panels”) to reduce and clarify the CSS.
- Added hover class to arrows and start/stop button to indicate the link has focus (while tabbing through the page)
- Fixed flickering problem completely :P – numerous changes made to script & CSS
- Bumped version to 1.4 because of significant differences from version 1.3
- Added
startPaneloption. - Added
playRtloption to reverse the play direction. - Added back
stopAtEndoption (not should how it was removed from the options). - Added
resumeOnVideoEndoption to prevent an active slideshow from pausing a video. - Changed location of reverse reference from the wrapping div (“anythingSlider” class) to the original ul (“silder1” id in the first example) – updated instructions.
- Fixed height/width options to accept strings (e.g. “400px” instead of a number, it may not work properly if values are other than the numnber of pixels).
- Fixed setting to accept strings (e.g. $(slider).anythingSlider(" 1 ")) as well as numbers.
- Fixed problem with objects (youtube videos) flickering in Firefox by setting
resizeContentto false. - Fixed problem that occurs when using an incorrect easing function name (submitted ticket: http://dev.jquery.com/ticket/7064 )
- Reorganized, cleaned up the code and updated the demos & instructions.
- Fixed minor bug with links to specific slides and updated example to reflect changes and be less confusing
- Tweaked start/stop button css to be more maleable
- Added resizePanel option – does not support percentage sizing.
- When true, it will resize all panels & solitary content to the size settings (CSS or the script options).
- When false, the AnythingSlider wrapper will resize to fit the panel (set inline or in the CSS for each panel).
- Fixed keyboard navigation to work with multiple AnythingSliders on a page.
- Added tabbed navigation. Both the links within panels and the thumbnail navigation will activate it.
- Added keyboard navigation.
- Embeded objects will now resize to fit the panel.
- YouTube videos will pause the video when it is not in view and play (if already started) if it is in view.
Note: this feature only works in non-IE browsers and when the files are hosted on a webserver as the flash player restricts calls between local files and the internet. - Modified code according to JSLint & added minified version.
- Previous / Next arrows are now optional
- Clicking start button immediately begins transition instead of waiting for the delay
- Greatly refactored CSS for a more fluid resizing behavior
- Dimensions can be passed via javascript or modified at the top of the css file
- Merged all Github forks
- Wrapper DIVs (
<div class="anythingSlider"><div class="wrapper">) no longer required in html. Divs are generated in jquery - Improved CSS scope and classes, Javascript degredation behaves differently however
- Hash URLS now work for multiple panels
- Accessibility improvements by Matt Lawson
- Some generic JavaScript/HTML/CSS code cleaning
- Move to GitHub entirely
- Ensures unique panel ID’s
- Removes navigation if there is only one panel
- Added option to stop on the last page when autoPlay is set to true
- Bug Fix: When autoPlay was set to false, any interaction with the control would cause a javascript error.
- Changed default easing to “swing” so didn’t depend on any other plugins
- Removed extra junk (other plugins used for design, etc)
- Added Pause on Hover option
- Added options for passing in HTML for the start and stop button
- Added option to use custom function for formatting the titles of the navigation
- Added public interface for linking directly to certain slides
- First version