Slide1 background

The Web's Most Advanced

Responsive and Touch Slider

Icon Icon Icon Icon Icon Icon Master slider in ipad Background of ipad Transparent stroke iPad reflect Icon Icon Icon Icon Icon Icon Icon Icon Icon Icon White stroke Master Slider logo in ipad Hand over ipad
Slide background

Responsive &

Touch Swipe Navigation

Master Slider in Macbook Master Slider in iMac Master Slider in iPad Master Slider in iPhone Hande is touching iPhone

HD

video backgrounds

Now you can add high quality videos as slide background. It supports various video formats and looped videos.

Slide3 Background

Hardware

&

Accelerated

Super Smooth

Transitions

Snow particle 1 Snow particle 2 Snow particle 3 A guy with snowboard

LOREM IPSUM DOLOR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.

LOREM IPSUM DOLOR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.

LOREM IPSUM DOLOR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Slide3 Background

25+ Starter Templates

Two of 25+ Five of 25+ Plus of 25+ Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle
Slide3 Background Layers plane Layers plane Layers plane Animated Layers Tooltip Shadow Image Layers Tooltip Shadow Video Layers Tooltip Shadow HTML Layers Tooltip Shadow Text Layers Tooltip Shadow char

Unlimited

Transition Effects

In & Out Transitions Supported

You can easily add image, html formatted texts and video layers over each slide and each layer accepts unique animation parameters like animation effect, duration, delay, etc.

Slide3 Background

Video Layer
Support

with Custom Video Cover

YouTube

Vimeo

video shadow
video shadow
Slide3 Background REDBULL

Fullscreen

Video Support

with Custom Video Cover

You need to put the following html markup in your html document where you want to have slider


Slide1 background

The Web's Most Advanced

Responsive and Touch Slider

Icon Icon Icon Icon Icon Icon Master slider in ipad Background of ipad Transparent stroke iPad reflect Icon Icon Icon Icon Icon Icon Icon Icon Icon Icon White stroke Master Slider logo in ipad Hand over ipad
Slide background

Responsive &

Touch Swipe Navigation

Master Slider in Macbook Master Slider in iMac Master Slider in iPad Master Slider in iPhone Hande is touching iPhone

HD

video backgrounds

Now you can add high quality videos as slide background. It supports various video formats and looped videos.

Slide3 Background

Hardware

&

Accelerated

Super Smooth

Transitions

Snow particle 1 Snow particle 2 Snow particle 3 A guy with snowboard

LOREM IPSUM DOLOR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.

LOREM IPSUM DOLOR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.

LOREM IPSUM DOLOR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Slide3 Background

25+ Starter Templates

Two of 25+ Five of 25+ Plus of 25+ Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle Particle
Slide3 Background Layers plane Layers plane Layers plane Animated Layers Tooltip Shadow Image Layers Tooltip Shadow Video Layers Tooltip Shadow HTML Layers Tooltip Shadow Text Layers Tooltip Shadow char

Unlimited

Transition Effects

In & Out Transitions Supported

You can easily add image, html formatted texts and video layers over each slide and each layer accepts unique animation parameters like animation effect, duration, delay, etc.

Slide3 Background

Video Layer
Support

with Custom Video Cover

YouTube

Vimeo

video shadow
video shadow
Slide3 Background REDBULL

Fullscreen

Video Support

with Custom Video Cover

You need to put the following scripts just before the < ⁄ body>
	<script type="text/javascript">
			
	   var slider = new MasterSlider();

	    // adds Arrows navigation control to the slider.
	    slider.control('arrows');
	    slider.control('timebar' , {insertTo:'#masterslider'});
	    slider.control('bullets');

	     slider.setup('masterslider' , {
	         width:1400,    // slider standard width
	         height:580,   // slider standard height
	         space:1,
	         layout:'fullwidth',
	         loop:true,
	         preload:0,
	         autoplay:true
	    });

	</script>
							
You need to import the following files
		<!-- Base MasterSlider style sheet -->
		<link rel="stylesheet" href="../masterslider/style/masterslider.css" />
		
		<!-- Master Slider Skin -->
		<link href="../masterslider/skins/default/style.css" rel='stylesheet' type='text/css'>
		 
		
		
		
		<!-- jQuery -->
		<script src="../masterslider/jquery-1.10.2.min.js"></script>
		<script src="../masterslider/jquery.easing.min.js"></script>
		
		<!-- Master Slider -->
		<script src="../masterslider/masterslider.min.js"></script>