jQuery Plugins Plugins 

ScreenSlider Responsive Touch Presentation jQuery Plugin

SONHLAB , , , , , , ,

ScreenSlider is a fullscreen slider presentation jQuery plugin which allows you customize effects for all parts with responsive design, a lot of effects, support touch to move slides. Just little changes in HTML you can create a professional presentation that works on almost platforms for your projects.

With this presentation plugin you can set effects, duration, easing for each background and each content in slides and set delay for each slide when you use Auto Play.

 

Buy Now

 

 

Demos:

ScreenSlider Responsive Full Screen Presentation Demo

 

 

ScreenSlider Presentation Features:

  • Responsive FullScreen Design.
  • Touch Swipe, Click,  Left and Right Keys Press.
  • Auto Play, Delay each slide.
  • Show/Hide Effects for Each Background.
  • Show/Hide Effects for Each Content.
  • Navigation Buttons.
  • Prev and Next Buttons.
  • Easy Customization.

 

Change Logs:

18 Feb 2013: Ver 1.2:

  • Added Prev and Next Buttons.
  • Added Left and Right Keys to move slide.
  • Update jQuery 1.9.1 , jQuery UI 1.10, jQuery Mobile 1.2 versions.

30 Sep 2012: Ver 1.1.1.

  • Optimize source code.
  • Fix some little bugs.

12 Sep 2012: Ver 1.1.

  • Add 3 new effects: fold, explode, clip.
  • Fix Display Bugs.

08 Sep 2012: Ver 1.0.1.

  • Fix AutoPlay Bug.

07 Sep 2012: First version.

 

Credits:

This plugin is developed by SONHLAB.com and used below third parties:

  • jQuery Library.
  • jQuery UI.
  • jQuery Mobile.
  • Touch Punch Plugin.

 

Table Of Contents:

  1. Setup ScreenSlider Presentation Plugin.
  2. Call ScreenSlider Presentation Plugin.
  3. ScreenSlider Package Structure.
  4. Parameters and Easing List.

Section 1: Setup ScreenSlider Presentation Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html> at top of the page.

Include the following code into HEAD section of the page.

Include CSS files:

<link rel="stylesheet" href="css/screenslider.css" type="text/css" />
<meta name="viewport" content="width=device-width, user-scalable=no" />

For Internet Explorer 8:

<!--[if lt IE 9]>
      <link rel="stylesheet" href="css/screenslider-ie.css" type="text/css" />
      <script type="text/javascript">
document.createElement('nav');
      </script>
   <![endif]-->

Include Javascript files:

<!-- jQuery Library -->
<script type="text/javascript" src="js/jquery/jquery.min.172.js"></script>
<!-- jQuery UI -->
<script type="text/javascript" src="js/jquery/jquery.ui.1823.custom.min.js"></script>
<!-- jQuery Mobile -->
<script type="text/javascript" src="js/jquery/jquery.mobile.custom.min.js"></script>
<!-- Touch Punch -->
<script type="text/javascript" src="js/touchpunch.min.js"></script>
<!-- ScreenSlider Plugin -->
<script type="text/javascript" src="js/screenslider.min.js"></script>

Setup done.

 

Section 2: Call ScreenSlider Presentation Plugin.

To call the plugin we need to add a script like bellow into the <head> tag.

<script type="text/javascript">
 $(window).load(function() {
   $("body").screenslider({
      slDelay: 5000, // Default Delay Time (ms)
      slShowNav: 1, // 1: enable NavBar | 0: disable NavBar
      slNavCtrl: 1, // 1: enable NavBar Control (Click) | 0: disable NavBar Control
      slAutoPlay: 1 // 1: enable AutoPlay | 0: disable AutoPlay
   });
 })
 </script>

 

Section 3: ScreenSlider Package Structure.

This section should be read along with the example file ( “screenslider.html” file ) also contained in the download package.

<div id="sl-container">

		<!-- Slide 1 -->
		<div class="sl-slidepack">

			<!-- Slide 1 Background -->
			<div class="sl-slidebg">
				<img src="image-link" alt="" />
			</div>
			<!-- End Slide 1 Background -->

			<!-- Slide 1 Content -->
			<div class="sl-contentpackage">

				<div class="sl-content">
				// Add Content Here
				</div>

				<div class="sl-content">
				// Add Content Here
				</div>

			</div>
			<!-- End Slide 1 Contnet -->

		</div>
		<!-- Emd Slide 1 -->

</div>

 

Section 4: Parameters and Easing List.

Javascript Parameters:

Parameters Properties Description
enableKeys boolean This param is used to enable or disable Press Left and Right Arrow Keys to move slides.
Value: 1: enable, 0: disable.
enableSwipe boolean This param is used to enable or disable Swipe feature.
Value: 1: enable, 0: disable.
slShowNav boolean This param is used to enable or disable NavBar.
Value: 1: enable, 0: disable.
slNavCtrl boolean This param is used to enable or disable Nav Control.
Value: 1: enable, 0: disable.
slAutoPlay boolean This param is used to enable or disable AutoPlay.
Value: 1: enable, 0: disable.
slDelay integer This param is used to set default delay time for each slide when enable AutoPlay.
Default value: 5000

 

HTML Parameters:

Parameters Positions Description
data-efin sl-slidebg
sl-content		 This param is used to set show effect.
Value: slide, dropdown, riseup, moveleft,
moveright, fade, fold, explode, clip.
data-durin sl-slidebg
sl-content		 This param is used to set duration time ( miliseconds )
when slides show.
data-esin sl-slidebg
sl-content		 This param is used to set easing effect when slides show.
Value: see Easing List below.
data-efout sl-slidebg
sl-content		 This param is used to set hide effect.
Value: slide, dropdown, riseup, moveleft,
moveright, fade, fold, explode, clip.
data-durout sl-slidebg
sl-content		 This param is used to set duration time ( milisecondes )
when slides go out
data-esout sl-slidebg
sl-content		 This param is used to set easing effect when slides go out.
Value: see Easing List below.
data-sldelay sl-slidepack This param is used to set delay time ( miliseconds )
for slides when enable AutoPlay.

 

Easing List:

swing | easeInQuad | easeOutQuad | easeInOutQuad | easeInCubic | easeOutCubic | easeInOutCubic | easeInQuart | easeOutQuart | easeInOutQuart | easeInQuint | easeOutQuint | easeInOutQuint | easeInSine | easeOutSine | easeInOutSine | easeInExpo | easeOutExpo | easeInOutExpo | easeInCirc | easeOutCirc | easeInOutCirc | easeInElastic | easeOutElastic | easeInOutElastic | easeInBack | easeOutBack | easeInOutBack | easeInBounce | easeOutBounce | easeInOutBounce.

 

 

[endedwords product=””]http://talk.sonhlab.com/room/screenslider-jquery-plugin[/endedwords]