Avalanche Slider

  • AVALANCHE SLIDER

  • FULLY CSS3 TRANSITION DRIVEN
    WITH BEAUTIFUL CAPTION ANIMATIONS
  • FULLY RESPONSIVE
    FROM DESKTOP DOWN TO MOBILE
  • SUPPORTS
    HTML5 VIDEO, YOUTUBE & VIMEO
  • A SIMPLE BUT POWERFUL SLIDER
    BY THEMEMOUNTAIN

A Responsive Slider

Avanlanche is 100% reponsive and CSS3 transitions driven with a simple JS fallback for browsers such as IE9. It supports both landscape and portrait images, HTML5, YouTube and Vimeo videos, and a range of 3D transitions for captions and caption images. With minimal CSS the slider is very easy to customize. Scroll down to examples and see what Avalanche can do.


Resource Files

Avalanche requires the following resource files:

Css
								
									<link rel="stylesheet" href="css/avalanche.css" />
								
							
Js
								
									<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
									<script type="text/javascript" src="js/jquery.tm.swipe.min.js"></script>
									<script type="text/javascript" src="js/jquery.tm.avalanche.min.js"></script>
								
							

Markup

Example
								
									
  • THIS IS CAPTION 1
  • THIS IS CAPTION 2
  • THIS IS CAPTION 3

The IMG Tag

Images are added to slides and/or captions using the img tag. The url of the image is added to the data-src attribute instead of the src itself because images are preloaded and progressively added to the src attribute.

Example
								
									slide 1
								
							

Important: If retina is supported (i.e. retinaSupport = true or data-retina is used ), two images must be provided, the original and the retina version. For example, if your slider images are named "slide-1.jpg, slide-2.jpg" etc., the corresponding retina versions should be named "slide-1@2x.jpg, slide-2@2x.jpg" using the @2x suffix. Also ensure that the retina version is twice the size of the original image.


Slide Overlay

Avalanche now supports overlays for slider images. This is useful when captions need more focus than the slide itself. A slide overlay is created adding the data attributes data-overlay-bkg-color (for which color is defined as a hex ex. #ff0000) and data-overlay-bkg-opacity (for which opacity is defined as a decimal 0-1) to the slide li tag.

Example
								
									
  • ...

  • Caption Structure

    The Avalanche Slider takes two types of captions: Scalable and Non Scalable Captions.

    Scalable Captions

    If this type of caption is used, the Avalanche Slider script will calculate the ratio of each style applied and position of the caption and scale it accordingly as the slider is resized or orientation changed. This is useful for shorter captions where they are key words or phrases are visible even if scaled.

    Scalable captions can be positioned using four data attributes, namely data-x, data-y, data-offsetx and data-offsety.

    Example
    								
    									
    This is a caption
    Non Scalable Captions

    If this type of caption is used, the Avalanche Slider will not scale the captions, instead you will need to scale the caption i.e. change font-size, padding etc. by targeting the caption using CSS for the break points of your choice. This type of caption is useful when a caption contains more than just a few keywords.

    Non Scalable Captions are created by adding the data attribute data-no-scale to the .tms-caption wrapper.

    Non scalable captions can be horizontally aligned using text aligning classes such as .left, .center, .right and vertically aligned by applying vertical align classes such as .v-align-top and .v-align-bottom. These classes should be added to the .tms-content-inner wrapper.

    Example
    								
    									

    Caption Title

    Note: A non scalable caption can be animated just like a scalable caption. However, to ensure the caption does not span the full width of its parent container when animating, add the .inline class to the .tms-caption wrapper.

    We can also force a caption onto a new line by inserting a div with the .clear class.


    Scalable Caption Postion Data Attributes

    Captions can be positioned and moved about the X and Y axis by using the data-x/data-y and data-offsetx/data-offset-y data attributes.

    Attribute Values Default Description
    data-x left, center, right left Position on the x axis
    data-y top, center, bottom top Position on y axis
    data-offsetx number 0 Offset on x axis, entered as 000px
    data-offsety number 0 Offset on y axis, entered as 000px

    Caption Animation Data Attribute

    Captions only animate in once a target slide is fully in view and has stopped animating. The way in which the caption transitions to its position can be controlled using the data-animate-in attribute. Note: If using Non Scalable Cations make sure to add the class .inline to the .tms-caption wrapper; this will ensure that the caption is correctly animated. Transition parameters are entered as an array, for example:

    Example
    								
    									
    CAPTION
    Attribute Values Default Description
    Opacity 0 - 1 0 Sets starting opacity of caption
    transX -/+ number 0 Sets initial position of caption on x axis, entered as 500px or 500
    transY -/+ number 0 Sets initial position of caption on y axis, entered as 500px or 500
    transZ -/+ number 0 Sets initial position of caption on z axis, entered as 500px or 500
    rotateX -/+ number 0 Sets initial rotation of caption on x axis, entered as 180deg or 180
    rotateY -/+ number 0 Sets initial rotation of caption on y axis, entered as 180deg or 180
    rotateZ -/+ number 0 Sets initial rotation of caption on z axis, entered as 180deg or 180
    scale number 1 Sets initial scale of caption, where 1 is no scaling
    duration milliseconds 700ms Sets duration of transition, entered as 700ms or 700
    delay milliseconds 0ms Sets delay before transitiosn starts, entered as 700ms or 700
    easing string easeInOutQuint Sets easing type of transition, click here to see easing types
    Preset Caption Animations New

    Avalanche slider now supports a range of new presets to faciliate caption animations. Note: duration, delay and easing can still be overwritten if using a preset creating different effects. Here is how to use a preset:

    Example
    								
    									
    CAPTION

    Click here for full list of presets

    Note: caption perspective is by default set to 800px. To change this, simply target the .tmh-perspective class.


    Avalanche Usage Updated

    To call the Avalanche Slider plugin the following call should be added before the closing body tag on document ready.

    Example
    								
    									$( document ).ready( function(){
    										$( '.tm-slider-container' ).avalanche();
    									});
    								
    							
    Attribute Values Default Data Attribute Description
    animation string 'slide' data-animation Attribute added to slider wrapper. Sets slide animation, 'slideLeftRight', 'slideTopBottom', 'scaleIn', 'scaleOut', or 'fade'.
    parallax boolean false data-parallax Attribute added to slider wrapper. No value required. Whether slider container should simulate parallax effect as page scrolls. See prerequisites.
    easing string easeInOutQuint data-easing Attribute added to slider wrapper. Sets easing type of transition. Click here to see easing types.
    speed milliseconds 700 data-speed Attribute added to slider wrapper. Sets animation speed of slide transition.
    parallaxSpeed integer 0.2 data-parallax-speed Attribute added to slider wrapper. Determines parallax speed 0.1-0.5.
    parallaxScaleOut boolean false data-parallax-scale-out Attribute added to slider wrapper. No value required. Whether slider container should progressively scale up on scroll.
    parallaxScaleOut boolean false data-parallax-fade-out Attribute added to slider wrapper. No value required. Whether slider container should fade out progressively on scroll.
    navArrows boolean true data-nav-arrows Attribute added to slider wrapper. Whether the slider should have navigation arrows
    navPagination boolean true data-nav-pagination Attribute added to slider wrapper. Whether the slider should have pagination bullets
    navShowOnHover boolean true data-nav-show-on-hover Attribute added to slider wrapper. Whether navigation should show on hover only
    paginationType string 'bullets' Deterimines pagination type. Currently only 'bullets' are supported
    forceFit boolean false data-force-fit Attribute added to the '.tms-slide' wrapper. No value required. Whether all slide images, not caption images or graphics, should be scaled to fit the slider container.
    fullWidth boolean false Whether slider should be launched in full with mode
    fullscreen boolean false Whether slider should be launched in fullscreem mode
    scaleUnder integer 1140 data-scale-under Attribute added to slider wrapper. At what window width the slider should start scaling.
    scaleMinHeight integer 214 data-scale-min-height Attribute added to slider wrapper. Minimum height that the slider should scale to
    captionScaling boolean true Whether captions should scale. Not supported in fullscreen mode. Use CSS for scaling instead
    carousel boolean false data-crousel Attribute added to slider wrapper. No value required. Whehter slider should be launched in carousel mode.
    carouselVisible integer 1 data-carousel-visible-slides Attribute added to slider wrapper. Determines the number of slides visible at once if carousel is set to true. Caption scaling is automatically turned off if visible slides is set to two or more.
    autoAdvance boolean false data-auto-advance Attribute added to slider wrapper. No value required. Whether slideshow should be active.
    autoAdvance boolean false data-auto-advance Attribute added to slider wrapper. No value required. Whether slideshow should be active.
    showProgressBar boolean true data-progress-bar Attribute added to slider wrapper. Determines whether slider should show progress bar.
    pauseOnHover boolean true data-pause-on-hover Attribute added to slider wrapper. Determines if slideshow should pause upon mouseover.
    useVideoApi boolean true Whether the API for YouTube and Vimeo should be loaded; if true, it will load necessary scripts. Automatically disabled for mobile devices
    autoPlay boolean true data-video-auto-play Attribute added to slider wrapper. Whether video should start playing automatically
    replayOnEnd boolean true data-replay-on-end Attribute added to slider wrapper. Whether video should replay upon ending
    respectRatio boolean true Whether video should be sized based on its aspect ratio; if false, it will scale to fit the slide
    muteBkgVideo boolean false data-mute-bkg-video Attribute added to slider wrapper. Whether background video should be muted
    lazyload boolean true Determines whether slider should load the slides progressively
    retinaSupport boolean false data-retina Attribute added to img tag. No value required. Whether slider should serve retina images for retina displays. Affects all images, slide and caption images.
    retinaSupportMobile boolean false Whether the plugin should swap images on mobile retina enabled devices. Set to false by default to save bandwidth usage on mobile devices.
    retinaSuffix string '@2x' The suffix that will be added to the image url.

    Addtional Slider Attributes

    Below are a list of useful data attributes that have no default settings.

    Attribute Values Default Description
    data-width number n/a Sets width of slider. Value used for calculating scaling ratio.
    data-height number n/a Sets height of slider. Value used for calculating scaling ratio.
    data-external-padding number 0 Useful when layouts use external padding that need to be taken into account for width calculations. Specified number will be subtracted from the width/height of the slider.
    data-as-bkg-image n/a n/a Forces the slider to set the loaded image as a background image of li.tms-slide
    data-image-wrapper n/a class Useful when the slide should be set as a background image of another wrapper other than the default li.tms-slide. Specified as a class, leaving out the period.

    Avalanche Parallax New

    Avalanche can now be used as a parallax header with the option to fade out the slider and/or scale it out upon page scroll. Important: The slider does require an addtional wrapper with the class .tm-slider-parallax-container for this effect to function. Below is an example:

    Example
    								
    									
    • THIS IS CAPTION 1

    Important: The parallax effect is only supported for featured sliders and headers, not for content sliders. Also, if parallax is supported (i.e. parallax = true or data-parallax is used ), you must ensure that consecutive content sections are positioned "relative" with a z-index of 1. Each section must also be given a background color as they will scroll above the slider.


    Further Examples

    Below are a few examples of what can be donw with the slider. Note that an excess amount of videos will slow down performance.

    Easing Types

    • linear
    • swing
    • easeOutCubic
    • easeInOutCubic
    • easeInCirc
    • easeOutCirc
    • easeInOutCirc
    • easeInExpo
    • easeOutExpo
    • easeInOutExpo
    • easeInQuad
    • easeOutQuad
    • easeInOutQuad
    • easeInQuart
    • easeOutQuart
    • easeInOutQuart
    • easeInQuint
    • easeOutQuint
    • easeInOutQuint
    • easeInSine
    • easeOutSine
    • easeInOutSine
    • easeInBack
    • easeOutBack
    • easeInOutBack
    • easeFastSlow
    • easeBounceBack
    • easeBounceBackHard
    • easeBounceIn
    • easeSwingInOut

    Caption Animation Presets

    Fades
    • fadeIn

    Slide In
    • slideInUpShort
    • slideInRightShort
    • slideInDownShort
    • slideInLeftShort
    • slideInUpLong
    • slideInRightLong
    • slideInDownLong
    • slideInLeftLong

    Bounce In
    • bounceIn
    • bounceOut
    • bounceInUp
    • bounceInRight
    • bounceInDown
    • bounceInLeft

    Scale In
    • scaleIn
    • scaleOut

    Flips & Spins
    • flipInX
    • flipInY
    • spinInX
    • spinInY
    • helicopterIn
    • helicopterOut

    Special
    • signSwingTop
    • signSwingRight
    • signSwingBottom
    • signSwingLeft
    • wiggleX
    • wiggleY
    • dropUp
    • dropDown
    • rollInLeft
    • rollInRight
    • turnInRight
    • turnInLeft
    Theme Mountain

    Current Version