ေိ္ေိ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.
01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>FlexSlider Widget : <default></title> <script type='text/javascript' src='js/modernizr-2.5.2-respond-1.1.0.min.js'></s cript> <link type='text/css' href='css/style.css' rel='stylesheet'/> <link type='text/css' href='css/flexslider.css' rel='stylesheet'/> <script type='text/javascript' src='js/jquery-1.7.2.min.js'></script> <script type='text/javascript' src='js/jquery.flexslider-min.js'></script> <script type='text/javascript' src='js/jquery.mousewheel.js'></script> <script type='text/javascript' src='js/jquery.easing.1.3.js'></script> </head> <body> <script type="text/javascript"> $(window).load(function() { $('#slider').flexslider({ namespace: "flex-", //{NEW} String: Prefix string attach ed to the class of every element generated by the plugin selector: ".slides > li", //{NEW} Selector: Must match a simple patter n. '{container} > {slide}' -- Ignore pattern at your own peril animation: "slide", easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported! direction: "horizontal", //String: Select the sliding direction, 'horizo ntal' or 'vertical' reverse: false, //{NEW} Boolean: Reverse the animation direc tion animationLoop: false, //Boolean: Should the animation loop? If f alse, directionNav will received "disable" classes at either end smoothHeight: true, //{NEW} Boolean: Allow height of the slider t o animate smoothly in horizontal mode slideshow: true, //Boolean: Animate slider automatically slideshowSpeed: 5000, //Integer: Set the speed of the slideshow cycling, in milliseconds animationSpeed: 600, //Integer: Set the speed of animations, in mi lliseconds initDelay: 0, //{NEW} Integer: Set an initialization del ay, in milliseconds randomize: false, //Boolean: Randomize slide order useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available touch: true, //{NEW} Boolean: Allow touch swipe navigat ion of the slider on touch-enabled devices video: false, //{NEW} Boolean: If using video in the sl ider, will prevent CSS3 3D Transforms to avoid graphical glitches directionNav: true, //Boolean: Create navigation for previous/ next navigation? (true/false) controlNav: true, //Boolean: Create navigation for paging co ntrol of each clide? Note: Leave true for manualControls usage keyboard: true, //Boolean: Allow slider navigating via keyboa rd left/right keys mousewheel: false, //Boolean: Allow slider navigating via mou sewheel prevText: "Previous", //String: Set the text for the "previous"
directionNav item nextText: "Next", //String: Set the text for the "next" dire ctionNav item pausePlay: false, //Boolean: Create pause/play dynamic eleme nt pauseText: "Pause", //String: Set the text for the "pause" pau sePlay item playText: "Play", //String: Set the text for the "play" paus ePlay item startAt: 0, //Integer: The slide that the slider should sta rt on. Array notation (0 = first slide) pauseOnAction: true, //Boolean: Pause the slideshow when intera cting with control elements, highly recommended. pauseOnHover: true, //Boolean: Pause the slideshow when hoverin g over slider, then resume when no longer hovering start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide controlsContainer: "", //Selector: Declare which container th e navigation elements should be appended too. Default container is the flexSlide r element. Example use would be ".flexslider-container", "#container", etc. If t he given element is not foun d, the default action will be taken. manualControls: "", //Selector: Declare custom control naviga tion. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The nu mber of elements in your controlNav should match the number of slides/tabs. // Carousel Options itemWidth: 0, //{NEW} Integer: Box-model width of individu al carousel items, including horizontal borders and padding. itemMargin: 10, //{NEW} Integer: Margin between carousel it ems. minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this. maxItems: 0, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit. move: 0, //{NEW} Integer: Number of carousel items th at should move on animation. If 0, slider will move all visible items. before: function(){}, //Callback: function(slider) - Fires a synchronously with each slider animation after: function(){}, //Callback: function(slider) - Fires after each slider animation completes end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous) }); }); </script> <div id="main-container"> <p><a href="http://www.woothemes.com/flexslider/">Flexslider Demo and Documentat ion</a></p> <div id="main" class="wrapper clearfix">  <div id="container"> <div id="slider" class="flexslider"> <ul class="slides"> <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li> <li> <img src="images/kitchen_adventurer_lemon.jpg" />
</li> <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li> <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li> <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li> <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li> <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li> <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li> </ul> </div> <div id="carousel" class="flexslider" style="display:none;"> <ul class="slides"> <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li> <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li> <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li> <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li> <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li> <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li> <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li> <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li> </ul> </div> </div> </div>  </div>  </body> </html>

ေိ္ေိ

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ေိ္ေိ

Uploaded by

Copyright:

Available Formats

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

You might also like