flexslider example 001

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.1/jquery.flexslider.js"></script>
<div id="slider" class="flexslider">
    <ul class="slides">
        <li>
            <img src="http://flex.madebymufffin.com/examples/images/kitchen_adventurer_cheesecake_brownie.jpg" />
            <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
        </li>
        <li>
            <img src="http://flex.madebymufffin.com/examples/images/kitchen_adventurer_lemon.jpg" />
            <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
        </li>
        <li>
            <img src="http://flex.madebymufffin.com/examples/images/kitchen_adventurer_donut.jpg" /><p class="flex-caption">Captions and cupcakes. Winning combination.  Let's make the caption alot longer to see if it adjusts.  What will happen. Test, test, test, test.  Blah. blah, blah.  Let's make it a few more lines to see what happens.  </p>
        </li>
        <li>
            <img src="http://flex.madebymufffin.com/examples/images/kitchen_adventurer_caramel.jpg" /><p class="flex-caption">Captions and cupcakes. Winning combination.  <a href="http://google.com" target="_blank">More Info</a></p>
        </li>
        <li>
            <img src="http://flex.madebymufffin.com/examples/images/kitchen_adventurer_cheesecake_brownie.jpg" />
        </li>
        <li>
            <img src="http://flex.madebymufffin.com/examples/images/kitchen_adventurer_lemon.jpg" />
        </li>
        <li>
            <img src="http://flex.madebymufffin.com/examples/images/kitchen_adventurer_donut.jpg" />
        </li>
        <li>
            <img src="http://flex.madebymufffin.com/examples/images/kitchen_adventurer_caramel.jpg" />
        </li>
        <li>
            <img src="http://flex.madebymufffin.com/examples/images/kitchen_adventurer_cheesecake_brownie.jpg" />
        </li>
        <li>
       ...

CSS

/* --------------------------------------------- */

/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

/* Browser Resets */
 .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {
    outline: 0;
}
.slides, .flex-control-nav, .flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* FlexSlider Necessary Styles
*********************************/
 .flexslider {
    margin: 0;
    padding: 0;
}
.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
 .flexslider .slides img {
    width: 100%;
    display: block;
}
.flex-pauseplay span {
    text-transform: capitalize;
}
/* Clearfix for the .slides element */
 .slides:after {
    content:".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
html[xmlns] .slides {
    display: block;
}
* html .slides {
    height: 1%;
}
/* No JavaScript Fallback */

/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
 .no-js .slides > li:first-child {
    display: block;
}
/* FlexSlider Default Theme
*********************************/
 .flexslider {
    margin: 0 0 60px;
    background: #fff;
    border: 4px solid #fff;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    zoom: 1;
}
.flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.loading .flex-viewport {
    max-height: 300px;
}
.flexslider .slides {
    zoom: 1;
}
.flex-container...

JavaScript

$('#slider').flexslider({
                animation: "fade",
                easing: "swing",
                controlNav: true,
                animationLoop: true,
                slideshow: true,
                slideshowSpeed: 7000,
                animationSpeed: 600,
                initDelay: 0,
                pauseOnAction: true,
                pauseOnHover: true,
                touch: true,
                controlNav: true,
                directionNav: true,

            });