“Wope Slider” Documentation by “WopeThemes” v1.0


“Wope Slider v1.0”

Created: 10/1/2012
By: WopeThemes
Email: rongconvn89@gmail.com

Thank you for purchasing Our Slider. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. HTML Structure
  2. CSS , Js And Images Files
  3. Call The Slider
  4. Config The Slider
  5. Config Each Slide
  6. Config Each Layer
  7. Online Documentation
  8. Quick Start Demo

A) HTML Structure - top

Copy this piece of html code to create a slider in your desired position of your page.

			

The Slider ID "basic-slider" is optional in case you want to use many sliders and config them differently on your page

Wope Slider is a responsive-ready slider, which means it can be adapted automatically to any size of its container, so you just need to config the maximum size of the slider. To do this, you need to change this code.

			...
			
...
...

B) CSS , Js And Images Files. - top

You need to do is copying these essential files and place it in your website. You should place it in your root folder.

Css file :
wopeslider.css

Javascript files :
jquery-1.7.2.min.js
jquery.easing.1.3.js
wopeslider.jquery.js or wopeslider.jquery.min.js

Skin files :
"skins" folder

After copying those files to the necessary places, on the page running the slider, you need to load them by adding these lines of code before the HEAD tag.

Css file :

				;
			

Javascript files :

				
				
				
			


C) Call The Slider - top

After setup everything, call the slider to see it works.

				$('.wope-slider').wopeslider({});
			

If you work on many sliders whose different configs, you can call each slider separately.

				$('#basic-slider').wopeslider({
					skins : 'basic',
				});
				$('#square-slider').wopeslider({
					skins : 'square',
				});
			


D) Config The Slider - top

				$('.wope-slider').wopeslider({
					skin : 'mural-white'
					autoplay : true,
					show_gui : true,
					pause_button : true,
					navigation_buttons : true,
					numbered_buttons : true,
				});
			

Wope Slider provides you 10 skins to choose from: 'basic' , 'square' , 'mural-white' , 'mural-black' , 'picture-white' , 'picture-black' , 'rounded-white' , 'rounded-black' , 'modern-white' , 'modern-black' . Black Skin Example White Skin Example

autoplay : true/false
Automatically change slide.

show_gui : true/false
Hide/Show All buttons

pause_button : true/false
Hide/Show play/pause buttons

navigation_buttons : true/false
Hide/show next/prev buttons

numbered_buttons : true/false
Hide/show numbered/radio buttons

Check Gui Options Example


E) Config Each Slide - top

Slide contains many layers to show content.

				...
				
...
...
...

You need to number your slides. Time is the amount of time for each slide. During this time, layers will perform movements and display content of each slide.


F) Config Each Layer - top

"Layer" is simply a layer in your slide. Layer can move around, hide or display to show the slide's content.

You need to number layers. Add as many layers as your want to.

					...
					
					
					...
				

delay : delay time of the layer, starts to count since the slide begins until the layer starts to move.

time : movement time of the layer, starts to count since the layer begins moving until it stops and keeps its position till the end of the slide.

easing : layer's movement easing. You should refer to Jquery Ui easing

action : Layer's action. You can use these options: left , right , top , bottom , fade , fadeleft , faderight , fadeup , fadedown


Once again, thank you so much for purchasing this slider. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

WopeThemes

Go To Table of Contents