3D Slider
Benefits from 3D Slider
- ENLDESS LOOP
- Use ANY HTML Content
- Easy to handle
- Customize the speed
- Imagesize adjustable
- Simple to style
- Less code
- Only HTML, Javascript, CSS
- Easy to combine with other Javascript Librarys
Install in your website with only 3 easy steps
1. Include 3DSlider.css and 3DSlider.js in the head
<head>
<link rel="stylesheet" href="3DSlider.css" type="text/css" media="screen"/>
<script src="3DSlider.js"></script>
</head>
2. Include the 3D Slider in your homepage in the body
<body>
<div id="Slider3D">
<img class="control left-arrow" onclick="preImg();" src="images/icon-left-arrow.png" alt="richt">
<img class="control right-arrow" onclick="nextImg();" src="images/icon-right-arrow.png" alt="richt">
<div class="slide" style="" data-slide=""><img onclick="pre(this);" src='images/simple-slider1.jpg' alt='' ></div>
<div class="slide" style="" data-slide=""><img onclick="pre(this);" src='images/simple-slider2.jpg' alt='' ></div>
<div class="slide" style="" data-slide=""><img onclick="next(this);" src='images/simple-slider3.jpg' alt='' ></div>
<div class="slide" style="" data-slide=""><img onclick="next(this);" src='images/simple-slider4.jpg' alt='' ></div>
<div class="slide" style="" data-slide=""><img onclick="next(this);" src='images/simple-slider5.jpg' alt='' ></div>
<div class="slide" style="" data-slide=""><img onclick="next(this);" src='images/simple-slider6.jpg' alt='' ></div>
<div class="slide" style="" data-slide=""><img onclick="next(this);" src='images/simple-slider7.jpg' alt='' ></div>
<div class="slide" style="" data-slide=""><img onclick="next(this);" src='images/simple-slider8.jpg' alt='' ></div>
</div>
</body>
3. Include this simple Javascript function
<script>
Slider3D(90, 200, 400, 30) // imgHeight, imgWidth, imgCenterWidth, speed
</script>
That's it!
