Simple Slider for background images with parallax effect
HTML JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
img
.gitignore
README.md
index.html
parallax.slider.css
parallax.slider.js
style.css

README.md

ParallaxSlider

Simple Slider for background images with parallax effect

Tutorial

Include files JS and CSS

    <link type="text/css" rel="Stylesheet" href="parallax.slider.css" />
    <script src="parallax.slider.js"></script>

Call the script on class ".parallax-slider"

    <script type="text/javascript">
    	$( document ).ready(function() {
    		$(".parallax-slider").parallaxSlider({
    			// Optional parameter
                // Default:
                // speedSlide : 5000
                // speedParallax : 0.5
                // description : true
                speedSlide : 5000,
                speedParallax : 0.50,
                description : true
    		});
    	});
    </script><br>

Include your parallax slider in a contanier

    <div class="container-slider">
		<div class="parallax-slider">
			<img src="img/img1.jpg" alt="First description">
			<img src="img/img2.jpg" alt="Second description">
		</div>
	</div>

Where css of the container is something like

    .container-slider{
    	width: 100%;
    	height: 600px;
    	position: relative;
    	margin: 0;
    }