title: Change background according to Slide
body: <p>I am trying to get the following:</p>
  
  <p>By using Flexslider (http://www.woothemes.com/flexslider/) I want to get a different background color according to which slide is loaded.</p>
  
  <p>I did something like this:</p>
  
  <pre><code>  &lt;?php
      $bg1="red";
      $bg2="blue";
    ?&gt;
  </code></pre>
  
  <p>Then, in my flexslider jquery:</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
      $(window).load(function(){
        $('.flexslider').flexslider({
          animation: "slide",
          start: function(slider){
            $('body').removeClass('loading');
          },
          before: function(slider) {
            var current = slider.currentSlide;
            $('#container').css("background-color","&lt;?php echo $bg?&gt;+current");
          },
        });
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>I am trying to retrieve the value from my php variables, and put them inside the css for my container. Ok here is where I'm stuck, how do I get it to load bg1 if it's the first slide, bg2 if it's the second, and so on?</p>
  
  <p>I thought I could do something like +current but it's not working... I'm sure it's something easy here-</p>
  
  <p>Any help is super appreciated!</p>
  
  <p>Thx!</p>