This plugin requires at least WordPress 3.0
Step 1: Installation – https://www.youtube.com/watch?v=sp7TvIDlnVs
Step 2: Create a Slider – https://www.youtube.com/watch?v=vXOkiXm4vYo
Step 3: Add Layers – https://www.youtube.com/watch?v=YgZl1qgcFPs
Step 4: Manage Multiple Sliders – https://www.youtube.com/watch?v=lWJNfu3iTQA
Step 1. Enter in your wordpress CMS and go to Plugins menu
Step 2. Under Plugins menu click "Add New"
Step 3. Select "Upload", choose the archive uberSlider_classic.zip that you downloaded and hit "Install Now"
Step 4. After the plugin is installed click "Activate Plugin"
Step 5. In you page just add the shortcode: [uberSliderClassic settings_id='1']
click here for more details regarding the shortcode
css | the folder contains the .css files used by the pluging |
images | the folder contains the images used by the pluging |
js | the folder contains the .js files used by the pluging |
classic | the folder contains the .js & .css files that the video slider use. |
tpl | the folder contains the template files used by the pluging |
uberSliderClassic.php | the plugin itself |
From this section you can define the sliders.
If you need to include multiple sliders in your pages with different settings and playlist you can define the sliders and manage the settings for each one.
If you need only one slider in your website, just edit the default one.
From this section you can define the video slider settings.
General Settings | |
Slider Width | slider width |
Slider Height | slider height |
Width 100% | Possible values: true - the slider width will be 100% false - the slider width will be what you've set for 'width' parameter |
Center Plugin | Possible values: true - the banner will be centered on the page false - the banner will be centered on the page |
Skin Name | available skins: - bullets - thumbs |
Responsive | Possible values: true - the slider will responsive false - the slider will not be responsive |
Responsive Relative To Browser | Possible values: true - the slider will be responisve relatively to browser dimensions false - the slider will be responisve relatively to parent div |
Auto Play | You can define the time (in seconds) until the next photo will play. If you set it 0 the slider will not autoplay |
Loop | Possible values: true - the slider will loop when reaches the end false - the slider will stop when reaches the end |
Target Window For Link | Possible values: '_blank' - the link associated to the primary photo will open in a new window '_slef'- the link associated to the primary photo will open in the same window |
Scroll Slide Duration | Time to make the transition/animation from one slide to another |
Scroll Slide Easing | The animation (from one slide to another) easing. Possible values: linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce |
Pause On Mouse Over | Possible values: true - enables autoPlay pause on mouse over false - disables autoPlay pause on mouse over |
Preload Time | the delay time (in seconds) to postpone the slider start. In this time, a rotating cicle will appear in the middle of the slider to signal that the slider is in loading status |
Default Easing for texts/elements over main image |
The defaut easing for layer animation. By layer, we understand a text or an image/text which comes over the main image. Possible values: linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce *** If needed, for each element you can set particular easing, usind 'data-easing' parameter. Please refer to Animated Layers (text/image) Over Main Image section NOTE: if you want to see the exit move, we recommend these values: |
Enable Touch Screen | Possible values: true - mobile touch screen support enabled false - mobile touch screen support disabled |
Default Exit Left Position | |
Default Exit Left Position | the default left position, for layer exit (in pixels) |
Default Exit Top Position | the default top position, for layer exit (in pixels) |
Default Exit Duration | the default duration, for layer exit (in seconds) |
Default Exit Delay | the default time delay, for layer exit (in seconds) |
Default Exit Easing | the default easing, for layer exit (in pixels) Possible values: linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce |
Disable Exit Move (default value) | Possible values: true - the layers will not exit false - the layers will exit according to exit left, top, delay, duration and easing value |
Controllers Settings | |
Show All Controllers | Possible values: true - all controllers will appear (next, previous, bottom navigation) false - all controllers will not appear (next, previous, bottom navigation) |
Show Navigation Arrows | Possible values: true - next, previous buttons will appear false - next, previous buttons will not appear |
Show Navigation Arrows On Init | Possible values: true - next, previous buttons will appear on first slider init false - next, previous buttons will not appear on first slider init |
Auto Hide Navigation Arrows | Possible values: true - next, previous buttons will hide when mouse out false - next, previous buttons will not hide when mouse out |
Show Bottom Navigation | Possible values: true - bottom navigation buttons will appear false -bottom navigation buttons will not appear |
Show Bottom Navigation On Init | Possible values: true - bottom navigation buttons will appear on first slider init false - bottom navigations buttons will not appear on first slider init |
Auto Hide Bottom Navigation | Possible values: true -bottom navigations buttons will hide when mouse out false - bottom navigations buttons will not hide when mouse out |
Show Preview Thumbs | Possible values: true - a preview image will appear on hovering each bottom button false - the preview image will not appear on hovering each bottom button |
Number Of Thumbs Per Screen | the number of thumbs per screen. If you set it to 0, it will be calculated automatically. You can set a fixed number, for example 4 |
Bottom Navigation - margin-bottom | the vertical pozition of the bottom navigation area |
Thumbs On Margin Top | for the thumbs that are on, there is an arrow pointing the active thumb. Using this parameter you can change the vertical position of this arrow |
Circle Timer Settings | |
Show Circle Timer | Possible values: true - shows the circle timer false - hides the circle timer |
Circle Radius | circle radius |
Circle Line Width | circle line width |
Circle Color | circle color, in hexa |
Circle Alpha | circle alpha, in percents. Posible values 0-100 |
Behind Circle Color | behind circle color, in hexa |
Behind Circle Alpha | behind circle alpha, in percents. Posible values 0-100 |
Image | URL to the large image |
Link For The Image | You can specify a link associated to the primary photo |
Link Target | Possible values: *** If all your links will behave the same, you can ignore this parameter and useTarget Window For Link from Slider Settings |
Thumbnail | URL to the thumbnail image |
Image Title / Alternative Text | alternative text used to populate "alt" tag |
Video Beneath Image | Possible values: true - if you have video content beneath main photo false - if you don'thave video content beneath main photo |
Content | The content (other than the large image). It can be a video beheath the large image or a HTML content if you don't have a large image. |
7. Animated Layers (text/image) Over Main Image
From this section you can define animated layer (text/image) over the image
General Settings | |
HTML Content/Image Title | HTML content for text layer/image title for image layer |
Element Link | layer link |
Element Link Target | layer link target |
Preanimate | Possible values: true - the layer will be preanimated and will appear in the final position, without animation false - the layer will animate from initial to final position. Is the parameter is not present, false value is used by default. |
Enter Values | |
Initial Left | the text left initial postion (in pixels) |
Initial Top | the text top initial postion (in pixels) |
Final Left | the text top initial postion (in pixels) |
Final Top | the text top final postion (in pixels) |
Duration | the animation duration (in seconds) |
Initial Fade/Opacity | initial fade value. Values from 0 to 100 |
Delay | delay time (in seconds) |
Easing | The easing for layer animation. Possible values: linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce |
Exit Values | |
Exit Left | the left position, for layer exit (in pixels) |
Exit Top | the top position, for layer exit (in pixels) |
Exit Duration | the duration, for layer exit (in seconds) |
Exit Delay | the time delay, for layer exit (in seconds) |
Exit Easing | The easing for layer exit animation. Possible values: linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce |
Cancel Exit | Possible values: true - the layer will not exit false - the layer will exit according to exit left, top, delay, duration and easing value |
The shortcode is:
[uberSliderClassic settings_id='1']
where
settings_id is the slider ID defined in "Manage Sliders" section