title: Change Background Color with Slides jQuery Cycle2
body: <p>I am using the Cycle2 plugin (http://jquery.malsup.com/cycle2/) for some sliders on a site, and need to detect an inline style from each image contained within the current slide, and then pass that to a parent div in order to change the background color of the area surrounding the slider with each slide.</p>
  
  <p>The output from the slider is like so:</p>
  
  <pre><code>&lt;div class="cycle-slideshow" data-cycle-fx="fade" data-cycle-timeout="0" data-cycle-slides="div" data-cycle-prev="#previous" data-cycle-next="#next" data-cycle-swipe="true" data-cycle-pager="#no-template-pager" data-cycle-pager-template="" style="position: relative;"&gt;
  &lt;div class="cycle-sentinel cycle-slide" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; visibility: hidden; display: block;"&gt;
      &lt;a href="#"&gt;&lt;img style="background-color: #ff0000;" src="http://cambelt.co/1070x400/Rotator1?color=cccccc,ffffff" alt="fsadfsdfas"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="slide cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1;"&gt;
      &lt;a href="#"&gt;&lt;img style="background-color: #ff0000;" src="http://cambelt.co/1070x400/Rotator1?color=cccccc,ffffff" alt="fsadfsdfas"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="slide cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 99; display: none;"&gt;
      &lt;a href="#"&gt;&lt;img src="http://cambelt.co/1070x400/Rotator2?color=cccccc,ffffff" alt=""&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="slide cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; display: none;"&gt;
      &lt;a href="#"&gt;&lt;img src="http://cambelt.co/1070x400/Rotator3?color=cccccc,ffffff" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="slide cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 96; display: none;"&gt;&lt;a href="#"&gt;&lt;img src="http://cambelt.co/1070x400/Rotator4?color=cccccc,ffffff" alt=""&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My parent div sits above the slider (.home-rotator-wrap) and spans the width of the window. So far I have this, but am fairly sure that I am way off.</p>
  
  <pre><code>$('.home-rotator-wrap &gt; .cycle-slide-active &gt; img').cycle(function() {
      var slideBG = $(this).attr('style');
      $('.home-rotator-wrap').attr('style', slideBG);
  });
  </code></pre>