OneSlider – Responsive Slider With Interactive Content
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 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:
- Installing OneSlider.
- Call OneSlider.
- OneSlider HTML Structure.
- 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.
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!