[Rx] How to Setup FlexSlider


FlexSlider is a free responsive jQuery slider toolkit from Woo Commerce. This is not a WordPress plug-in. It’s pure JavaScript.


1. Download the code

The version I downloaded was version 2.6.3.

2. Add CSS Links

<!-- Put CSS in <head> -–>
<link rel="stylesheet" href="flexslider.css" type="text/css">

3. Add Markup

<!-- Put Markup in <body> -–>
<div class="flexslider">
<ul class="slides">
<img src="img/slide1.jpg">
<img src="img/slide2.jpg">
<img src="img/slide3.jpg">

This assumes your slide images are in the img directory.

4. Setup Fonts

Just take the fonts folder that came in the download and copy the contents into the fonts directory.


The Flexslider.htm is a test file that I made up with basic html to test the code. The three image slides are in the img directory.

5. Edit flexslider.css

Make additions as shown below.

@font-face {
font-family: 'flexslider-icon';
src:url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('../fonts/flexslider-icon.woff') format('woff'), url('../fonts/flexslider-icon.ttf') format('truetype'), url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg'); font-weight: normal;
font-style: normal}

You need the “..” in front of the path to find the fonts directory.

6. Add JavaScript files to JS Directory.

Just take the jQuery jquery.min.js and FlexSlider jquery.flexslider-min.js files that came in the download and copy the contents into the js directory.


7. Add the JavaScript Links

<!—Put JAVASCRIPT in <head> -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>

8. Hook in Slider

<!-- Place in the <head>, after the css and js links –>
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {

Now you should be set to play the slides.