http://flex.madebymufffin.com/
Add these items to the <head> of your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!Step 1 - Link Files
<!-- 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> |
The FlexSlider markup is simple and straightforward. First, start with a single containing element, <div class="flexslider"> in this example. Then, create a <ul class="slides">. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each <li> and you are ready to rock.Step 2 - Add markup
<!-- 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> |
Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1. The $(window).load() is required to ensure the content of the page is loaded before the plugin initializes.Step 3 - Hook up the slider
<!-- Place in the <head>, after the three links --><script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider(); });</script> |
...and voila! That wraps up the most basic installation of FlexSlider into your webpage. Listed below are all of the options available to customize FlexSlider to suite your needs, along with their default values. For examples on how to use these properties for advanced setups, check out the Advanced Options section.Step 4 - Tailor to your needs
animation: "fade", //Select your animation type (fade/slide/show)slideshow: true, //Should the slider animate automatically by default? (true/false)slideshowSpeed: 7000, //Set the speed of the slideshow cycling, in millisecondsanimationDuration: 500, //Set the speed of animations, in millisecondsdirectionNav: 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)touchSwipe: true, //Touch swipe gestures for left/right slide navigation (true/false)prevText: "Previous", //Set the text for the "previous" directionNav itemnextText: "Next", //Set the text for the "next" directionNav itemrandomize: false, //Randomize slide order on page load? (true/false)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.manualControls: "" //Advanced property: Can declare custom control navigation. Example would be ".flex-control-nav li a" or "#tabs-nav li", etc. The number of elements in your controlNav should match the number of slides/tabs (obviously). |
沒有留言:
張貼留言