• 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

Full Width

Setting slider width to 100% and the fullwidth parameter to true will force the slider to take the full width of the page. Aspect ratios of images and videos are respected by default, which means that any image or video that cannot fill the full width will be centered within the slide. Forcing images to take the full width and height of the slide is possible, by either setting the forcefit parameter to true (forcing all images) or adding the attribute data-force-fit to selected slides.

IMPORTANT: Slider and caption scaling in fullwidth mode is by default activated when the device window is equal to or less than 1140px. This prevents the height of the slider from being affected when scaling above this point. The scaling point can be overriden using the scaleUnder parameter in the call.


Forcefit

To forcefit an image to it's slide container we add data-force-fit to the li tag:

Example
								
									

Initializing Fullwidth & Scaling

Create a fullwidth slider by setting the fullwidth parameter to true. Optionally alter the scaleUnder and forceFit parameter:

Example
								
									$( document ).ready( function(){
										$( '.tm-slider-container' ).avalancheSlider({
											fullwidth:true,
											scaleUnder:1140,
											forceFit:false
										});
									});
								
							

Further Examples
Theme Mountain

Current Version