fnha flexslider

by John Allan

HTML

<script src="//cdn.jsdelivr.net/flexslider/2.1/jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/flexslider/2.1/flexslider.css">
<div id="workspace">
    <div id="grid">
        <div id="col">
            <div id="hpf-bannerRotator" class="hpf-bannerRotator">
                <div class="hpf-slides">
                <div class="hpf-slide">
                    <div class="hpf-mediaItem hpf-mediaItem-right">
                        <div class="hpf-mediaItem-media">
                            <img src="//www.johnallan.ca/testing/rotator-1.jpg"/>
                        </div>
                        <div class="hpf-mediaItem-body">
                            <h4>Working as a community. Learning from the past.</h4>  
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                        </div>
                    </div>
                </div><!-- /slide -->
                <div class="hpf-slide">
                    <div class="hpf-mediaItem">
                        <div class="hpf-mediaItem-media hpf-mediaItem-right">
                            <img src="//www.johnallan.ca/testing/rotator-2.jpg"/>
                        </div>
                        <div class="hpf-mediaItem-body">
                            <h4>Working as a community. Learning from the past.</h4>  
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                        </div>
                    </div>
                </div><!-- /slide -->
                <div class="hpf-slide">
                    <div class="hpf-mediaItem">
                        <div class="hpf-mediaItem-media hpf-mediaItem-right">
                            <img src="//www.johnallan.ca/testing/rotator-1.jpg"/>
                ...

CSS

#workspace{
    max-width:1440px;
    background:url("//www.johnallan.ca/testing/rotator-bkd.jpg") scroll no-repeat 0 0 transparent;
    height:451px;
}
#grid{
    color:#0000ff;
    max-width:980px;
    margin:0 auto;
}
#col{
    float:left;
}



/*#region $MEDIAITEM */

.mediaItem, 
.mediaItem-body{overflow:hidden; _overflow:visible; zoom:1; word-wrap:break-word}

.hpf-mediaItem .hpf-mediaItem-media img, 
.hpf-mediaItem img.hpf-mediaItem-media{display: block;}

.hpf-mediaItem .hpf-mediaItem-media{float:left; margin-right: 10px;}
.hpf-mediaItem.hpf-mediaItem-right .hpf-mediaItem-media{float:right; margin-left: 10px; margin-right:0;}

/*#endregion*/

/*#region $BANNERROTATOR */
.hpf-bannerRotator {
    position:relative;
}
.hpf-bannerRotator .hpf-slide{
    width:980px;
    height:451px;
    overflow:hidden;
}

.hpf-bannerRotator .hpf-mediaItem-body{
    color:#fff;
    padding:100px 20px 40px;
}

/*#endregion*/

JavaScript

$(document).ready(function () {
    
    $('#hpf-bannerRotator').flexslider({
        animation: 'slide',
        selector: '.hpf-slides > .hpf-slide',
        slideshow: false
    }); 
});