OneSlider – Responsive Slider With Interactive Content

November 3, 2017April 17, 2020 SONHLAB full width slider, infinite rotator, interactive, metro ui, responsive slider, slider, touch swipe

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.

Demo

Buy Now

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:

<!-- 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:

That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to open tickets in OneSlider Support Zone. No guarantees, but I’ll do my best to assist you. Thanks so much!