Wordpress旋转木马在Chrome中无法使用

Question

我有一个jquery轮播滑块，最近停止在Chrome中工作。我不确定，但我认为它发生在最新的WP更新中。它在Chrome中可以使用，因为我在JS Fiddle页面上有它.... http://jsfiddle.net/dwest/89zednzn/

＆＃13;

＆＃13;

jQuery(function($) { 

  // settings
  var $slider = $('.slider'); // class or id of carousel slider
  var $slide = 'li'; // could also use 'img' if you're not using a ul
  var $transition_time = 1000; // 1 second
  var $time_between_slides = 3000; // 3 seconds

  function slides(){
    return $slider.find($slide);
  }

  slides().fadeOut();

  // set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  // auto scroll 
  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
  );

});

＆＃13;

.slider {
  margin: 10px 0;
  width: 580px; /* Update to your slider width */
  height: 250px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
}

.slider li {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}

＆＃13;

<ul class="slider">
  <li>
   <img src="http://sunnythesong.com/wp-content/uploads/2014/02/Bobby_piano_SunnySL.jpg"/>
 </li>
 <li>
   <img src="http://sunnythesong.com/wp-content/uploads/2014/02/Bobby_guitarSL.jpg" />
 </li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/03/Cher-sunny_SL1.jpg"/>
</li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/03/BobbyHebbandBeatles-SL1.jpg"/>
</li>
  <li>
   <img src="http://sunnythesong.com/wp-content/uploads/2014/02/1976_disco_Sunny_coverSL.jpg" />
 </li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/02/sunny_cover3.jpg" />
 </li>
 <li>
   <img src="http://sunnythesong.com/wp-content/uploads/2014/02/hebb_cd_200x200.jpg" />
 </li>
<li>
 <img src="http://sunnythesong.com/wp-content/uploads/2014/03/hebb-ringo2-SL1.jpg" />
 </li>
<li>
   <img src="http://sunnythesong.com/wp-content/uploads/2014/02/sunny_cover200x200.jpg" />
 </li>
 <li>
   <img src="http://sunnythesong.com/wp-content/uploads/2014/02/hebb_Japan_guitar200x200.jpg" />
 </li>
 <li>
   <img src="http://sunnythesong.com/wp-content/uploads/2014/02/sunny_cover2.jpg" />
 </li>
 <li>
   <img src="http://sunnythesong.com/wp-content/uploads/2014/02/SUNNY-SHEET200x200.jpg" />
 </li>
  <li>
   <img src="http://sunnythesong.com/wp-content/uploads/2014/03/Mia-Colodne-SL1.jpg" />
 </li>
 <li>
   <img src="http://sunnythesong.com/wp-content/uploads/2014/03/lou_rawls_sheet_music-SL1.jpg" />
 </li>
 <li>
   <img src="http://sunnythesong.com/wp-content/uploads/2014/03/SUNNY-ebay_SL11.jpg" />
 </li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/03/Sunny_Japan_SL1.jpg"/>
</li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/03/Hebb-Dodger-stadiumSL1.jpg"/>
</li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/03/Bobby_guitar_autograph_SL1.jpg"/>
</li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/03/Sunny-sheetmusic-Hebb-SL1.jpg"/></li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/03/sunshine-headSL1.jpg"/>
</li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/03/Georgie-Fame-SunnySL1.jpg"/>
</li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/03/face-of-bobbySL1.jpg"/>
</li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/03/sunny-BONEY-M-SL1.jpg"/>
</li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/03/sheet-musicSL1.jpg"/>
</li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/03/Sunny-pageSL1.jpg"/>
</li>
<li><img src="http://sunnythesong.com/wp-content/uploads/2014/03/3-guitarsSL1.jpg"/>
</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

它无法在Wordpress页面上运行... http://sunnythesong.com/

Answer 1

SunnyTheSong.com失败，因为“$”未定义。具体来说，这失败了一个JS错误，说$未定义：

$('.slider')

从以下位置更改您的准备逻辑：

jQuery(function($) {
    // Your JS here
})

要：

(function($) { 
    // Your JS here
})(jQuery);