Skip to content

Instantly share code, notes, and snippets.

@cam-gists
Created August 20, 2012 15:47
Show Gist options
  • Select an option

  • Save cam-gists/3405278 to your computer and use it in GitHub Desktop.

Select an option

Save cam-gists/3405278 to your computer and use it in GitHub Desktop.
JQuery: Flexslider
<!-- 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