OneSlider jQuery
jQuery Plugins Plugins 

OneSlider – Responsive Slider With Interactive Content

SONHLAB , , , , , ,

OneSlider is a Responsive Slider jQuery plugin that is not only used to show your banners, items or image gallery but also allow you add content into each slide with a lot of effects and interactive features. Additionally, OneSlider also has full responsive design and touch swipe feature for mobile devices.

 

[tile_bt btstyle=”tile-bt-2 solid-orange-2 hovershadow-orange left-2 margin-10″ icon=”demo-white-circle-48″ title=”Demo”]http://demo.sonhlab.com/biz/js-plugins/oneslider/demo-1.php[/tile_bt][tile_bt btstyle=”tile-bt-2 solid-green hovershadow-green” icon=”shopping-white-circle-48″ title=”Buy Now”]http://codecanyon.net/item/oneslider-interactive-responsive-slider/4214576?ref=SOHN[/tile_bt][clearspace][/clearspace]

 

OneSlider Features:

  • Responsive Slider.
  • Unlimited Slides.
  • Infinitely Slide Rotating.
  • Touch Swipe for Mobile Devices.
  • Support Full Width Slider.
  • Move Next/Prev Slide by Left/Right Keys or Buttons.
  • AutoPlay with Delay Time for Each Slide.
  • A lot of Transition Effects.
  • Show/Hide Slider Navigation ( Thumbnails ).
  • 4 Positions for Short Content.
  • One more Sub Content for Each Slide.
  • Works on Almost Platforms ( Desktops, Laptops, Tablets and Smartphones ).

 

Change Logs:

Nov 2017: Version 1.2:

  • Fix bugs.
  • Update new jQuery Library and jQuery UI versions.
  • Show Prev, Next buttons when disabling thumbnails.
  • Update Swipe behavior for more intuitive.
  • Remove jQuery Mobile.
  • Add new EnableHover param to enable/disable hover event.

 

Apr 2016: Version 1.1:

  • Fix Swipe bug when opening text content.

Mar 2013: First Version.

 

Credits:

 

Table of Contents:

  1. Installing OneSlider.
  2. Call OneSlider.
  3. OneSlider HTML Structure.
  4. Parameters and Easing List.

 

Section 1: Intalling OneSlider – Responsive Slider.

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

Include the following code into HEAD section of the page.

Include CSS files:

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

Include Javascript files:

<!-- jQuery Lib -->
<script type="text/javascript" src="js/jquery/jquery.min.191.js"></script>

<!-- jQuery UI -->
<script type="text/javascript" src="js/jquery/jquery-ui-1.12.1.custom.min.js"></script>

<!-- jQuery Touch -->
<script type="text/javascript" src="js/jquery/jquery.ui.touch.min.js.js"></script>

<!-- Mousewheel plugin -->
<script type="text/javascript" src="js/jscrollpane/jquery.mousewheel.min.js"></script>

<!-- jScrollPane script -->
<script type="text/javascript" src="js/jscrollpane/jquery.jscrollpane.min.js"></script>

<!-- OneSlider Plugin -->
<script type="text/javascript" src="js/oneslider.dev.js"></script>

 

OneSlider is done and ready to use.

 

Section 2: Call OneSlider.

To call the plugin you can add below script into HEAD section:

<script type="text/javascript">

$(window).on('load', function() {

	$('#one-sliderholder').oneslider({
		ImgRatio: 0.5625,
		AutoPlay: false,
		Delay: 3000,
		EnableSwipe: true,
		EnableKeys: true,
		HideSliderNav: false
	});

})

</script>

 

Section 3: OneSlider HTML Structure.

This section should be read along with the example files also contained in the download package.

<!-- Start OneSlider -->
<div id="one-sliderholder">

  <!-- Start Slider View -->
  <div class="one-sliderview">

    <!-- Slide Pack 1 -->
    <div class="one-slidepack">
      // Slide Pack Content
    </div>
    <!-- End Slide Pack 1 -->

    <!-- Slide Pack 2 -->
    <div class="one-slidepack">
      // Slide Pack Content
    </div>
    <!-- End Slide Pack 2 -->

    <!-- Slide Pack 3 -->
    <div class="one-slidepack">
      // Slide Pack Content
    </div>
    <!-- End Slide Pack 3 -->

  </div>
  <!-- End Slider View -->

  <!-- Start Slider Navigation -->
  <div class="one-slidernavbar-holder">

    <!-- Start Prev Button -->
    <div class="one-prevslide">
      <img src="images/icons/prev-black.png" alt="prevslide" />
    </div>
    <!-- End Prev Button -->

    <!-- Start Slider Thumbnails -->
    <nav class="one-slidernavbar">
      // Add Thumbnail List
    </nav>
    <!-- End Slider Thumbnails -->

    <!-- Start Next Button -->
    <div class="one-nextslide">
      <img src="images/icons/next-black.png" alt="nextslide" />
    </div>
    <!-- End Next Button -->

  </div>
  <!-- End Slider Navigation -->

</div>
<!-- End OneSlider -->

 

Section 4: Parameters and Easing List.

Javascript Parameters:

Parameters Properties Description
ImgRatio integer This param is used to set Slider View Ratio ( Height / Width ).
Default Value: 0.5625 // 9:16.
AutoPlay boolean This param is used to enable or disable Auto Play feature.
Value: true: enable, false: disable.
Delay integer This param is used to set default delay time for each slide when AutoPlay is enabled.
Default Value: 3000 // 3 seconds.
EnableSwipe boolean This param is used to enable or disable Swipe feature to move next/prev slide.
Value: true | false.
EnableKeys boolean This param is used to enable or disable Left and Right keys to move next/prev slide.
Value: true | false.
HideSliderNav boolean This param is used to show or hide the slider navigation.
Value: true | false.
EnableHover boolean This param is used to enable or disable hover event when activating AutoPlay.
Value: true | false.

 

HTML Parameters:

Parameters Positions Description
data-delay one-slidepack This param is used to set delay time ( miliseconds )
for slides when AutoPlay is enabled.
data-bgefin one-slidebg This param is used to set effect to show slide background.
Value: movetoleft, movetoright, riseup, dropdown,
fade, fold, bounce, clip, explode,
puff, pulsate, scale, shake.
data-bgdurin one-slidebg This param is used to set time ( miliseconds ) to run showing effects for slide background.
data-bgesin one-slidebg This param is used to set easing effect to show slide background.
Value: see Easing List below.
data-pos one-slidecontentholder This param is used to set position for slide content.
data-cefin one-slidecontentholder This param is used to set effect to show slide content.
Value: movetoleft, movetoright, riseup, dropdown,
fade, fold, bounce, clip, explode,
puff, pulsate, scale, shake.
data-cdurin one-slidecontentholder This param is used to set time ( miliseconds ) to run showing effects for slide content.
data-cesin one-slidecontentholder This param is used to set easing effect to show slide content.
Value: see Easing List below.
data-cefout one-slidecontentholder This param is used to set effect to hide slide content.
Value: movetoleft, movetoright, riseup, dropdown,
fade, fold, bounce, clip, explode,
puff, pulsate, scale, shake.
data-cdurout one-slidecontentholder This param is used to set time ( miliseconds ) to run hiding effects for slide content.
data-cesout one-slidecontentholder This param is used to set easing effect to hide slide content.
Value: see Easing List below.

 

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=”OneSlider”]http://talk.sonhlab.com/room/oneslider-jquery-plugin[/endedwords]