title: Flexslider with dynamic content. e.g. images and / or video
body: <p>I amd using Flexslider to display images and video together but I am trying to figure out how to have it so that if a video is not present to show just the images and vice a versa. Currently, if both are present: images and video it works but as soon as you remove the video, the slider stops loading. </p>
  
  <p>Basic code from their demo:</p>
  
  <pre><code>    // Vimeo API nonsense
      var player = document.getElementById('player_1');
      $f(player).addEvent('ready', ready);
  
      function addEvent(element, eventName, callback) {
          if (element.addEventListener) {
              element.addEventListener(eventName, callback, false)
          } else {
              element.attachEvent(eventName, callback, false);
          }
      }
  
      function ready(player_id) {
          var froogaloop = $f(player_id);
          froogaloop.addEvent('play', function(data) {
              $('.flexslider').flexslider("pause");
          });
          froogaloop.addEvent('pause', function(data) {
              $('.flexslider').flexslider("play");
          });
      }
      // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
  
  $(".flexslider")
      .fitVids()
      .flexslider({
        animation: "slide",
        useCSS: false,
        animationLoop: false,
        smoothHeight: true,
        before: function(slider){
          $f(player).api('pause');
        }
    });
  </code></pre>
  
  <p>and </p>
  
  <pre><code>&lt;div class="flexslider"&gt;
    &lt;ul class="slides"&gt;
      &lt;li&gt;
        &lt;iframe id="player_1" src="http://player.vimeo.com/video/39683393?api=1&amp;player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="slide2.jpg" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="slide3.jpg" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="slide4.jpg" /&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>