Flexslider demo

50% width image, float right

by astrotim

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/flexslider/2.1/flexslider.css">
<script src="http://cdn.jsdelivr.net/flexslider/2.1/jquery.flexslider-min.js"></script>
<div class="flexslider">
    <ul class="slides">
        <li>
            <div class="slide-text">
                <h2>See the CSS pane</h2>
                <p>The image width needs to be set in your CSS to override the default Flexslider CSS of 100% width. See the CSS in this fiddle which declares .flexslider .slides img as width 50%.                 </p>
            </div>    
            <img src="http://demo.astronautweb.co/slider/with-content/images/01.jpg" alt="" />
        </li>
        <li>
            <div class="slide-text">
                <h2>Slide Two</h2>
                <p>Lorem ipsum ex qui aliqua nulla labore amet elit dolor commodo quis sint sint elit sint amet mollit dolore mollit adipisicing ad. Lorem ipsum ex qui aliqua nulla labore amet elit dolor commodo quis sint sint elit sint amet mollit dolore.
                </p>
            </div>    
            <img src="http://demo.astronautweb.co/slider/with-content/images/02.jpg" alt="" />
        </li>
        <li>
            <div class="slide-text">
                <h2>Slide Three</h2>
                <p>Lorem ipsum ex qui aliqua nulla labore amet elit dolor commodo quis sint sint elit sint amet mollit dolore mollit adipisicing ad. Lorem ipsum ex qui aliqua nulla labore amet elit dolor commodo quis sint sint elit sint amet mollit dolore.
                </p>
            </div>    
            <img src="http://demo.astronautweb.co/slider/with-content/images/03.jpg" alt="" />
        </li>        
    </ul>
</div>

CSS

body {
    font-family: sans-serif;
    padding: 20px;
}

h2 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 1em;
}

.slide-text {
    float: left;
    width: 40%;
    padding: 10px 5%;
}

.flexslider .slides img {
    float: right;
    width: 50%;
}

JavaScript

$(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide"
      });
    });