Created
August 20, 2012 15:47
-
-
Save cam-gists/3405278 to your computer and use it in GitHub Desktop.
JQuery: Flexslider
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Place somewhere in the <head> of your document --> | |
| <link rel="stylesheet" href="flexslider.css" type="text/css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | |
| <script src="jquery.flexslider.js"></script> | |
| <!-- Place in the <head>, after the three links --> | |
| <script type="text/javascript" charset="utf-8"> | |
| $(window).load(function() { | |
| $('.flexslider').flexslider(); | |
| }); | |
| </script> | |
| <!-- Place somewhere in the <body> of your page --> | |
| <div class="flexslider"> | |
| <ul class="slides"> | |
| <li> | |
| <img src="slide1.jpg" /> | |
| </li> | |
| <li> | |
| <img src="slide2.jpg" /> | |
| </li> | |
| <li> | |
| <img src="slide3.jpg" /> | |
| </li> | |
| </ul> | |
| </div> | |
| animation: "fade", //Select your animation type (fade/slide) | |
| slideshow: true, //Should the slider animate automatically by default? (true/false) | |
| slideshowSpeed: 7000, //Set the speed of the slideshow cycling, in milliseconds | |
| animationDuration: 500, //Set the speed of animations, in milliseconds | |
| directionNav: true, //Create navigation for previous/next navigation? (true/false) | |
| controlNav: true, //Create navigation for paging control of each clide? (true/false) | |
| keyboardNav: true, //Allow for keyboard navigation using left/right keys (true/false) | |
| prevText: "Previous", //Set the text for the "previous" directionNav item | |
| nextText: "Next", //Set the text for the "next" directionNav item | |
| slideToStart: 0, //The slide that the slider should start on. Array notation (0 = first slide) | |
| pauseOnAction: true, //Pause the slideshow when interacting with control elements, highly recommended. (true/false) | |
| pauseOnHover: false, //Pause the slideshow when hovering over slider, then resume when no longer hovering (true/false) | |
| controlsContainer: "" //Advanced property: Can declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken. | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment