RWD - Content Slider

by bizamajig

HTML

<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
<div id="tickets-packages-1" class="flexslider-widget">
            <div class="flexslider">
                <ul class="slides">
                    <li class="slide">
                        <div class="widget-well aligncenter">
                            <h2 class="widget-title"><?php _e('Season Pass', 'theatre'); ?></h2>
                            <div class="widget-content large">
                                <p>Our most flexible plan!</p>
                                <p><small>Choose your date in advance <br/>or at the last minute</small></p>
                                <p> <div class="ticket">Save 33%</div> </p>
                            </div>
                        </div>
                    </li>
                    <li class="slide">
                        <div class="widget-well aligncenter">
                            <h2 class="widget-title"><?php _e('Season Pass', 'theatre'); ?></h2>
                            <div class="widget-content large">
                                <p>Our most flexible plan!</p>
                                <p><small>Choose your date in advance <br/>or at the last minute</small></p>
                                <p> <div class="ticket">Save 33%</div> </p>
                            </div>
                        </div>
                    </li>
                    <li class="slide">
                        <div class="widget-well aligncenter">
                            <h2 class="widget-title"><?php _e('Season Pass', 'theatre'); ?></h2>
                            <div class="widget-content large">
                                <p>Our most flexible plan!</p>
                                <p><small>Choose your date in advance <br/>or at the last minute</small></p>
                                <p> <div class="ticket">Save 33%</div>...

CSS

.flexslider-widget {
    position: relative;
}
.flex-prev, .flex-next{
    background-color: green;
}
.flex-control-nav{
    position: relative;
    bottom:0;
}

JavaScript

$('#tickets-packages-1 .flexslider').flexslider({
    animation: "slide",
    controlsContainer: '#tickets-packages-1 .flex-nav',
    manualControls: '#tickets-packages-1 .flex-control-nav li',
    slideshowSpeed: 5000,
    animationDuration: 500,
});

$('#tickets-packages-2 .flexslider').flexslider({
    animation: "slide",
    controlsContainer: '#tickets-packages-2 .flex-nav',
    manualControls: '#tickets-packages-2 .flex-control-nav li',
    slideshowSpeed: 5000,
    animationDuration: 500,
});