Multiple FlexSliders

Two, independent Flexsliders

by josekerekes

HTML

<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<section class="banner">
    <div id="main-slider" class="flexslider">
        <ul class="slides">
            <li>
                <img src="http://www.rvia.org/Images/HomePageFlash/Mast-MovingTheEconomy.jpg"
                />
            </li>
            <li>
                <img src="http://www.rvia.org/Images/HomePageFlash/061505_GoRV_Day3_20466.jpg"
                />
            </li>
            <li>
                <img src="http://www.rvia.org/Images/HomePageFlash/061505_GoRV_Day3_8243.jpg"
                />
            </li>
            <li>
                <img src="http://www.rvia.org/Images/HomePageFlash/061505_GoRV_Day3_8271.jpg"
                />
            </li>
            <li>
                <img src="http://www.rvia.org/Images/HomePageFlash/061505_GoRV_Day4_10045.jpg"
                />
            </li>
            <li>
                <img src="http://www.rvia.org/Images/HomePageFlash/061505_GoRV_Day4_10127.jpg"
                />
            </li>
            <li>
                <img src="http://www.rvia.org/Images/HomePageFlash/061505_GoRV_Day4_30715.jpg"
                />
            </li>
            <li>
                <img src="http://www.rvia.org/Images/HomePageFlash/061505_GoRV_Day4_9213.jpg"
                />
            </li>
            <li>
                <img src="http://www.rvia.org/Images/HomePageFlash/061505_GoRV_Day4_9249.jpg"
                />
            </li>
            <li>
                <img src="http://www.rvia.org/Images/HomePageFlash/061505_GoRV_Day4_30715.jpg"
                />
            </li>
            <li>
                <img src="http://www.rvia.org/Images/HomePageFlash/061505_GoRV_Day4_9880.jpg"
                />
            </li>
            <li>
                <img...

CSS

* {padding:0;margin:0}
.banner {
    position:relative;
}
.flexslider {margin:0;border:none}
#page img {display:block}

#news-ticker {background:blue;color:#fff;z-index:90;position:absolute;bottom:0;left:0;padding:15px 50px;border:0;margin:0}

JavaScript

// The slider being synced must be initialized first
  $('#main-slider').flexslider({
      animation: "fade",
      controlNav: false,
      directionNav: true, 
      randomize: true,
      slideshowSpeed: 5000
  });

  $('#news-ticker').flexslider({
      animation: "fade",
      directionNav: true,
      controlNav: false,
      randomize:true,
      slideshowSpeed: 3000
  });