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.

 

 

OneSlider interactive responsive slider banner

 

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:

+ Mar 2013: First Version.

 

Credits:

 

Table of Contents:

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

 

 

Section 1: Setup 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.10.1.custom.min.js"></script>

<!-- jQuery Mobile -->
<script type="text/javascript" src="js/jquery/jquery.mobile.custom.min.130.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 setup is done.

 

Section 2: Call OneSlider.

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

<script type="text/javascript">

$(window).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.

 

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.

 

 

That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to email me via Contact Form. No guarantees, but I’ll do my best to assist you. Thanks so much!

 

 

LEAVE A COMMENT
Set your Twitter account name in your settings to use the TwitterBar Section.