Touch-enabled Fullscreen Slider Plugin with jQuery - jSlider

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.