向上滑動 - slideup 向下滑動 - slidedown 向右滑動 - slideright 向左滑動 - slideleft 水平滑動 (取決於下一個/上一個) - slidehorizontal 垂直滑動 (取決於下一個/上一個) - slidevertical 方塊滑動 - boxslide 水平滑塊 - slotslide-horizontal 垂直滑塊 - slotslide-vertical 方塊淡入 - boxfade 水平淡入 - slotfade-horizontal 垂直淡入 - slotfade-vertical 從右側淡入並滑動 - fadefromright 從左側淡入並滑動 - fadefromleft 從上方淡入並滑動 - fadefromtop 從下方淡入並滑動 - fadefrombottom 淡入左側並從右側淡出 - fadetoleftfadefromright 淡入右側並從左側淡出 - fadetorightfadefromleft 淡入頂部並從底部淡出 - fadetotopfadefrombottom 淡入底部並從頂部淡出 - fadetobottomfadefromtop 向右視差 - parallaxtoright 向左視差 - parallaxtoleft 向上視差 - parallaxtotop Parallax to Bottom - parallaxtobottom Zoom Out and Fade From Right - scaledownfromright Zoom Out and Fade From Left - scaledownfromleft Zoom Out and Fade From Top - scaledownfromtop Zoom Out and Fade From Bottom - scaledownfrombottom ZoomOut - zoomout ZoomIn - zoomin Zoom Slots Horizontal - slotzoom-horizontal Zoom Slots Vertical - slotzoom-vertical Fade - fade Random Flat - random-static Random Flat and Premium - random
Premium Transitions:
Curtain from Left - curtain-1 Curtain from Right - curtain-2 Curtain from Middle - curtain-3 3D Curtain Horizontal - 3dcurtain-horizontal 3D Curtain Vertical - 3dcurtain-vertical Cube Vertical - cube Cube Horizontal - cube-horizontal In Cube Vertical - incube In Cube Horizontal - incube-horizontal TurnOff Horizontal - turnoff TurnOff Vertical - turnoff-vertical Paper Cut - papercut Fly In - flyin Random Premium - random-premium 想了解更多清晰内容结构，优化阅读体验相关内容，尽在竞彩网tianhai。
data-randomtransition
"on" / "off" - This will allow a Random transitions of the Selected Transitions you choosed in the data-transitions. Dont use together with random premium and random flat transitions !
data-slotamount
The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.
data-masterspeed
The speed of the transition in "ms". default value is 300 (0.3 sec)
data-delay
A new Dealy value for the Slide. If no delay defined per slide, the dealy defined via Options will be used
Links (Full Slide Links)
data-link
A link on the whole slide pic
data-target
The target of the Link for the whole slide pic. (i.e. "_blank", "_self")
data-slideindex
Possible values: next,back, 1-x (where x is the max. Amount of slide) If this value is set, click on slide will call the next / previous, or n th Slide.
Thumbnail
data-thumb
An Alternative Source for thumbs. If not defined a copy of the background image will be used in resized form
Title
data-title
In Navigation Style Preview1- preview4 mode you can show the Title of the Slides also. Due this option you can define for each slide its own Title
The Main Image
Each Slide (<li> </li>) MUST include a main image which is added as a simple <img> tag at the first level. It can be a Simpe image, a colored or transparent image, or dummy image as lazy load version.
Lazy Loading src="images/slides/dummy.webp" (or any other dummy small image to decrease the loading time of Document) data-lazyload="path/filename" Here you need to declare the Path and File name of the image you wish to laod as Main Image in Slide
Background Repeat data-bgrepeat:no-repeat / repeat / repeat-x / repeat-y (the way the image is shown in the slide main container)
Background Fit data-bgfit:cover / contain / normal / width(%) height(%) (select one to decide how the image should fit in the Slide Main Container). For Ken Burn use only a Number, which is the % Zoom at start. 100 will fit with Width or height automatically, 200 will be double sized etc..
Background Fit End data-bgfitend: Use only a Number . i.e. 300 will be a 300% Zoomed image where the basic 100% is fitting with width or height.
Background Position data-bgposition:left top / left center / left bottom / center top / center center / center bottom / right top / right center / right bottom
Background Position End data-bgpositionend:left top / left center / left bottom / center top / center center / center bottom / right top / right center / right bottom For Ken Burns Animation. This is where the IMG will be animatied
Ken Burns Effect data-kenburns:on/off to turn on Ken Burns Effect or keep it disabled.
Duration for Ken Burns data-duration:the value in ms how long the animation of ken burns effect should go. i.e. 3000 will make a 3s zoom and movement.
Easing of Ken Burns Effect data-ease:Same values as by Caption Easings available. The Movement Easing.
The Captions / Layers
Each <li> (slide) can include unlimited amount of Captions. Caption are simple html markups with iframe, image, heading , paragraph and any other tags. Each Caption must be wrapped via a <div class="caption"></div>.
Each Caption has some special classes and some data- attributes, to set animation type, position, speed, easings etc.
Caption Classes
the "caption" class
It is the Wrapping main Class which is a MUST. Each Caption need to be defined like this, other way the Slider Plugin can not identifikate the Caption container
These are Styling classes created in the settings.css You can add unlimited amount of Styles in your own css file, to style your captions at the top level already
You can define a Parallax Level for each Layer, which will allow the Layer to move based on scroll or mouse movements (if option activated). Based on the Class the Strength of the offset can be defined.
Animation Classes
Animation Classes defined the start / end animations on Captions.
Incoming animation Classes:
sft - Short from Top
sfb - Short from Bottom
sfr - Short from Right
sfl - Short from Left
lft - Long from Top
lfb - Long from Bottom
lfr - Long from Right
lfl - Long from Left
skewfromleft - Skew from Left
skewfromright - Skew from Right
skewfromleftshort - Skew Short from Left
skewfromrightshort - Skew Short from Right
fade - fading
randomrotate- Fade in, Rotate from a Random position and Degree
customin - Custom Incoming Animation - see below all data settings
Outgoing animation Classes:
stt - Short to Top
stb - Short to Bottom
str - Short to Right
stl - Short to Left
ltt - Long to Top
ltb - Long to Bottom
ltr - Long to Right
ltl - Long to Left
skewtoleft - Skew to Left
skewtoright - Skew to Right
skewtoleftshort - Skew Short to Left
skewtorightshort - Skew Short to Right
fadeout - fading
randomrotateout竞彩网tianhai围绕足球竞猜APP不断创新，回应用户的真实需求。
customout - Custom Outgoing Animation - see below all data settings
Custom Incoming / OutGoing settings:
data-customin="rotationX:0;rotationY:0;rotationZ:0...." - How the Caption is Transformed before animation starts. All value will be animated to 0 or 1 to remove all transoformation of the Caption.
data-customout="rotationX:0;rotationY:0;rotationZ:0...."- The End Transformed Style after the animation finnished. All value will be animated from 0 or 1 to the selected transformation.
Custom Animation (in and out) Parameters set via data-customin and data-customout within the caption div. Parameter should be closed with ";"
rotationX:0;rotationY:0;rotationZ:0 - value between -920 and +920. Rotation Direction set via X,Y,Z, Can be mixed scaleX:1;scaleY:1 - value between 0.00 - 10.00 Scale width and height. 1 == 100% skewX:1;skewY:1 - value between 0.00 - 10.00 Skew inVertical and/or horizontal direction 0 = no skew opacity:1 - value between 0.00 - 1.00 Transparencity transformOrigin:center center - Sets the origin around which all transforms occur. By default, it is in the center of the element ("50% 50%"). You can define the values using the keywords "top", "left", "right", or "bottom" or you can use percentages (bottom right corner would be "100% 100%") or pixels. Values:left top / left center / left bottom / center top / center center / center bottom / right top / right center / right bottom or x% y% transformPerspective:300 - To get your elements to have a true 3D visual perspective applied, you must either set the “perspective” property of the parent element or set the special “transformPerspective” of the element itself (common values range from around 200 to 1000, the lower the number the stronger the perspective distortion). x:0;y:0; - the x / y distance of the element in px. i.e. x:-50px means vertical left 50px
Caption data- settings
data-x
Possible Values are "left", "center", "right", or any Value between -2500 and 2500. If left/center/right is set, the caption will be siple aligned to the position. Any other "number" will simple set the left position in px of tha caption.
At "left" the left side of the caption is aligned to the left side of the slider. At "center" the center of caption is aligned to the center of slide. At "right" the caption right side is aligned to the right side of the Slider.
data-y
Possible Values are "top", "center", "bottom", or any Value between -2500 and 2500. If top/center/bottom is set, the caption will be siple aligned to the position. Any other "number" will simple set the top position in px of tha caption.
At "top" the top side of the caption is aligned to the top side of the slider. 精选世界杯在线竞彩平台内容，竞彩网tianhai与你一同发现更多精彩。 At "bottom" the caption bottom side is aligned to the bottom side of the Slider.
data-hoffset
Only works if data-x set to left/center/right. It will move the Caption with the defined "px" from the aligned position. i.e. data-x="center" data-hoffset="-100" will put the caption 100px left from the slide center horizontaly.
data-voffset
Only works if data-y set to top/center/bottom. It will move the Caption with the defined "px" from the aligned position. i.e. data-x="center" data-hoffset="-100" will put the caption 100px left from the slide center vertically.
data-speed
The speed in milliseconds of the transition to move the Caption in the Slide at the defined timepoint.
data-splitin
Split Text Animation (incoming transition) to "words", "chars" or "lines". This will create amazing Animation Effects on one go, without the needs to create more captions.
data-elementdelay
A Value between 0 and 1 like 0.1 to make delays between the Splitted Text Element (start) Animations. Higher the amount of words or chars, you should decrease that number!
data-splitout
Split Text Animation (outgoing transition) to "words", "chars" or "lines". Only available if data-end is set !
data-endelementdelay
A Value between 0 and 1 like 0.1 to make delays between the Splitted Text Element (end) Animations. Higher the amount of words or chars, you should decrease that number!
data-start
The timepoint in millisecond when/at the Caption should move in to the slide.
data-easing
The Easing Art how the caption is moved in to the slide (note! Animation art set via Classes !). Possible Values are:
New Easings:Linear.easeNone Power0.easeIn (linear), Power0.easeInOut (linear), Power0.easeOut (linear), Power1.easeIn, Power1.easeInOut, Power1.easeOut, Power2.easeIn, Power2.easeInOut, Power2.easeOut, Power3.easeIn, Power3.easeInOut, Power3.easeOut, Power4.easeIn, Power4.easeInOut, Power4.easeOut, Quad.easeIn (same as Power1.easeIn), Quad.easeInOut (same as Power1.easeInOut), Quad.easeOut (same as Power1.easeOut), Cubic.easeIn (same as Power2.easeIn), Cubic.easeInOut (same as Power2.easeInOut), Cubic.easeOut (same as Power2.easeOut), Quart.easeIn (same as Power3.easeIn), Quart.easeInOut (same as Power3.easeInOut), Quart.easeOut (same as Power3.easeOut), Quint.easeIn (same as Power4.easeIn), Quint.easeInOut (same as Power4.easeInOut), Quint.easeOut (same as Power4.easeOut), Strong.easeIn (same as Power4.easeIn), Strong.easeInOut (same as Power4.easeInOut), Strong.easeOut (same as Power4.easeOut), Back.easeIn, Back.easeInOut, Back.easeOut, Bounce.easeIn, Bounce.easeInOut, Bounce.easeOut, Circ.easeIn, Circ.easeInOut, Circ.easeOut, Elastic.easeIn, Elastic.easeInOut, Elastic.easeOut, Expo.easeIn, Expo.easeInOut, Expo.easeOut, Sine.easeIn, Sine.easeInOut, Sine.easeOut, SlowMo.ease
Old Easings: easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic
The speed in milliseconds of the transition to move the Caption out from the Slide at the defined timepoint.
data-end
The timepoint in millisecond when/at the Caption should move out from the slide.
data-endeasing
The Easing Art how the caption is moved out from the slide (note! 竞彩网tianhai专注中国体育彩票网，为用户提供专业可靠的体验。 Possible Values are:
New Easings:围绕覆盖全球热门体育赛事，资讯全面及时，竞彩网tianhai持续打磨更优质的服务。
Old Easings: 竞彩网tianhai深耕专业团队深度解读，洞察比赛趋势领域，用心服务每一位用户。
在数据整合分析，助力用户理性决策方面，竞彩网tianhai提供贴心周到的支持。
竞彩网tianhai以清晰内容结构，优化阅读体验为核心，带来高效便捷的体验。
想了解更多足球竞猜APP相关内容，尽在竞彩网tianhai。
竞彩网tianhai围绕世界杯在线竞彩平台不断创新，回应用户的真实需求。
竞彩网tianhai围绕清晰内容结构，优化阅读体验不断创新，回应用户的真实需求。
Special Classes within the Caption container
tp-scrollbelowslider
If this class added to an element within the caption container, it will scroll the Body Position to under the current slider (used in Fullscreen slider only)
scrolloffset
value from -200 till 200. The Offset Value of the Scroll Position
tp-resizeme
Add class tp-resizeme to the container inside the caption and every item within (included the same container) will be responsive resized. Only needed if more than one depth exist in the container !
This classes added without any content in a closed div i.e. <div class="frontcorner"></div> within the container. It will cut the left/right side of the caption background in 45° 1:1
Loop Animations Within the Layers
To Define Loop animations, everything which comes inside the Layer need to be wrapped with a div container where you can set the different Loop Animation Details
You can add now Static Layers to your Slider. Static Layers are defiend outside the Layers (since they are independent of any other elements and slides).
You will need to define the Start and End Slide and as always the start and end time where the Layer becomes visible, or hides again.
Add your Static Layers into the static layer wrapper under the <ul> tag within the Slider !
The slider can play Vimeo, YouTube and HTML5 (videoJs) Videos, in boxed and "FullSlide" size. Via the Embeded API's the Slider will be paused, and restarted from the VideoPlayers. To use the Video Files in Slider see the following instructions.
Each Video file has the same data- options like:
autoplay
Possible Values: "true" / "false" - will play the Video Directly when slider has been loaded
autoplayonlyfirsttime
Possible Values: "true" / "false" after first Autplay the video will not be played automatically
nextslideatend
Possible Values: "true" / "false" after video come to the end position, it swaps to the next slide automatically.
videoposter
the full path to an image which will be shown as Thumbnail for the Video. (only if autoplay set to false, or autoplayonlyfirsttime set to true)
forcecover
used only at HTML5 Videos. In case it is selected, the Videos will be resized to cover the full Slider size.
forcerewind
Every time the Slide is shown, the Video will rewind to the start.
volume
If value set to "mute", video will be played muted.
videowidth
Width of Video (i.e. 500 for 500px, or 100% for 100%
videoheight
精选足球竞猜APP内容，竞彩网tianhai与你一同发现更多精彩。
aspectratio
"16:9" or "4:3"
videopreload
Which content of Video should be preloaded. "none", "meta", "auto"
videomp4
The MP4 Source for the HTML5 Video
videowebm
The WEBM Source for the HTML5 Video
videoogv
The OGV Source for the HTML5 Video
ytid
The YouTube ID of the Video
vimeoid
The Vimeo ID of the Video
videocontrols
Show/Hide the controls of the Video. "none", "controls"
videoattributes
Further Video Attributes for not listed Options and Settings of Video. Used for YouTube and Vimeo like "enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
videoloop
Loop HTML5 Videos - "none", "loop", "loopandnoslidestop" loop and no slide stop will loop the video, but as soon the video Timer reached the endpoint, next slide will be started.
YouTube Video via iFrame
Boxed version
YouTube Video will be added within a caption due an iframe. The Following example shows an iFrame embeded YouTube Video in a caption (460px X 259px), i.e.:
You may need to use the origin=http://yourdomain or origin=https://yourdomain for YT Api issues !
YouTube Video via Options
Boxed version
YouTube Video will be added via Options. The Following example shows an embeded YouTube Video which is loaded only on Demand. in a caption (460px X 259px), i.e.:
Vimeo Video API works only Online. It will not work well on Localhost due some Sandbox Security reason. Please always test it Online. Vimeo Video will be added via Options. The Following example shows an embeded Vimeo Video which is loaded only on Demand in a Layer (460px X 259px), i.e.:
In order to use a banner timer, you will need to add the markup within the banner or fullwidthbanner divs.
The markup should look like :
Top Positioned Banner Timer:
<div class="tp-bannertimer"></div>
Bottom Positioned Banner Timer:
<div class="tp-bannertimer tp-bottom"></div>
To Hide the Banner Timer:
To remove this timer just simple set the option to hideTimerBar:"on" due the Initialising process
Alternative Image for IE8 and Mobile Devices
In case you wish to show a single image instead of the Slider on Slower Browsers / mobiles, please simple use the aimg and aie8, amobile data attributes as shown here
Responsive means that the slider will adjust to every screen width. The Sourrounding Container Size will define the Max width of the Slider. The Height will be auto calculated.
The basic containers are build like this ( in none Fullwidth, but 4 Level Responsive Version):
You can use the Slider also in FullScreen mode. It will need to have the possiblity to use the full width of the screen, means do not wrap it in any boxed container. For Fullscreen simple use the following markups and styles:
Dont forget to use the option fullScreen:"on" to use in the initialisation. If you wish to have an offset, which allows you to add i.e. a Menu over the fullscreen slider, just use the fullScreenOffsetContainer: option and set it to the container which wrapps the menu i.e
API 函數與事件
The slider offers a public API which you can use to control component inside the Slider from within your own scripts. To access this api, use the following code.
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
var api = tpj('.banner').revolution(
....
You can see in the example index-responsive-API.html how to use the different functions, and how to get the trigered Events.
Once this is done you may use any of the following functions:
api.revpause() - Stops the Timer and autoplay
api.revresume() - Starts the Timer and resume to autoplay
api.revprev() - Change to previous slide
api.revnext() - Change to next slide
api.revshowslide(n) - Change to the slide with index Nr. (n)
api.revmaxslide() - Show the amount of slides
api.revscroll() - Scrollt Body under the Slide in FullScreen mode
Or you may use any of the following Events:
revolution.slide.onchange - Event is triggered when Slide has been rotated. data value will give you the current slide. i.e.