Slider Revolution Responsive jQuery Plugin. Slider Revolution is an innovative, responsive jQuery Slider Plugin that displays your content the beautiful way. Whether it’s a Slider, Carousel, Hero Scene or even a whole Front Page, you will be telling your own stories in no time! Slider Revolution Highlights.
How to start This chapter will gives you general instructions on how to install the slider and setup the options. Later chapters will be more detailed if needed. What files do I need to upload to my server? Please upload the rs-plugin folder to your server. In this folder you will find the following subfolders containing all of the items content: • js • css • assets You could use your own jQuery but we recommend loading it directly from the Google ressources (see later in this documentation). You will find many examples in your downloaded zip under the examples&sources folder.
Implement the jQuery Add the following lines to your HTML Head. • delay The time one slide stays on the screen in Milliseconds. Global Setting.
You can set per Slide extra local delay time via the data-delay in the element (Default: 9000) • startheight This Height of the Grid where the Captions are displayed in Pixel. This Height is the Max height of Slider in Fullwidth Layout and in Responsive Layout. In Fullscreen Layout the Gird will be centered Vertically in case the Slider is higher then this value. • startwidth This Height of the Grid where the Captions are displayed in Pixel.
This Width is the Max Width of Slider in Responsive Layout. In Fullscreen and in FullWidth Layout the Gird will be centered Horizontally in case the Slider is wider then this value.
Navigation Settings: • onHoverStop Possible Values: 'on', 'off' - Stop the Timer if mouse is hovering the Slider. Caption animations are not stopped!! Buku belajar dan pembelajaran pdf.
They will just play to the end. • thumbWidth / thumbHeight The width and height of the thumbs in pixel. Thumbs are not responsive from basic. For Responsive Thumbs you will need to create media qury based thumb sizes.
• thumbAmount The Amount of visible Thumbs in the same time. The rest of the thumbs are only visible on hover, or at slide change. • hideThumbs 0 - Never hide Thumbs. 1000- 100000 (ms) hide thumbs and navigation arrows, bullets after the predefined ms (1000ms == 1 sec, 1500 == 1,5 sec etc.) • navigationType Display type of the navigation bar (Default:'none') Possible values are: 'bullet', 'thumb', 'none' • navigationArrows Display position of the Navigation Arrows (Default: 'nexttobullets') Possible values are 'nexttobullets', 'solo' nexttobullets - arrows added next to the bullets left and right solo - arrows can be independent positioned, see further options • navigationStyle Look of the navigation bullets if navigationType 'bullet' selected.
Possible values: 'round', 'square', 'round-old', 'square-old', 'navbar-old' • navigationHAlign, navigationVAlign Vertical and Horizontal Align of the Navigation bullets / thumbs (depending on which Style has been selected). Possible values navigationHAlign: 'left','center','right' and naigationVAlign: 'top','center','bottom' • navigationHOffset navigationVOffset The Offset position of the navigation depending on the aligned position. From -1000 to +1000 any value in px. -30 • soloArrowLeftHaling, soloArrowRightHalign, solorArrowLeftHalign, soloArrowRightHalign Vertical and Horizontal Align of the Navigation Arrows (left and right independent!) Possible values navigationHAlign: 'left','center','right' and naigationVAlign: 'top','center','bottom' • soloArrowLeftHOffset, soloArrowLeftVOffset, soloArrowRightHVOffset, soloArrowRightVOffset The Offset position of the navigation depending on the aligned position. From -1000 to +1000 any value in px. -30 Each Arrow independent • touchenabled Enable Swipe Function on touch devices (Default: 'on') Possible values: 'on', 'off' Loops • stopAtSlide Stop Timer if Slide 'x' has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined.