Touch-enabled Fullscreen Slider Plugin with jQuery - jSlider
File Size: | 8 MB |
---|---|
Views Total: | 1560 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
jSlider is a jQuery/HTML5/CSS based responsive, fullscreen, touch-enabled content slider plugin that allows you to slide through a series of html contents in both Vertical and Horizontal direction.
Basic usage:
1. Load the jQuery jSlider plugin's JavaScript and CSS in your project that has jQuery installed.
<link rel="stylesheet" href="style/jslider.css"> <script src="js/jquery/jquery.js"></script> <script src="js/jslider.js"></script>
2. Load the jQuery touchWipe plugin to enable the touch events on mobile devices
<script src="touchswipe.min.js"></script>
3. Add content sections to the slider.
<div id="M"> <div id="Scene"> <div class="section" data-section="#one" data-stitle="One section"> <div class="fade"> <img src="images/one.jpg" width="100%" height="100%"/> <div style="width:50%;position:absolute;top:0;left:15%;top:15%"> <h1 class="h1">PHOTO - 1</h1> </div> </div> </div> <div class="section" data-section="#two" data-stitle="Two section"> <div class="fade"> <img src="images/two.jpg" width="100%" height="100%"/> <div style="width:50%;position:absolute;top:0;left:15%;top:15%"> <h1 class="h1">PHOTO - 2</h1> </div> </div> </div> <div class="section" data-section="#three" data-stitle="Three section"> <div class="fade"> <img src="images/three.jpg" width="100%" height="100%"/> <div style="width:50%;position:absolute;top:0;left:15%;top:15%"> <h1 class="h1">PHOTO - 3</h1> </div> </div> </div> <div class="section" data-section="#four" data-stitle="Four section"> <div class="fade"> <img src="images/four.jpg" width="100%" height="100%"/> <div style="width:50%;position:absolute;top:0;left:15%;top:15%"> <h1 class="h1">PHOTO - 4</h1> </div> </div> </div> <div class="section" data-section="#five" data-stitle="Five section"> <div class="fade"> <img src="images/five.jpg" width="100%" height="100%"/> <div style="width:50%;position:absolute;top:0;left:15%;top:15%"> <h1 class="h1">PHOTO - 5</h1> </div> </div> </div> </div> </div>
4. Call the function on the section container to active the slider.
$(".section").jSlider();
5. Available options to customize the slider.
$(".section").jSlider({ column:4, defaultsection: "", fade: 3000, transition: "2s ease", arrows:true, arrowAnimations:false, arrowContents: true, auto: false, autoSecond:5000 });
About author:
Author: Cemil Sevim
Website: http://galaxyazilim.com/
This awesome jQuery plugin is developed by Cemil Sevim. For more Advanced Usages, please check the demo page or visit the official website.