Wordpress 轮播在 Chrome 中不起作用

Posted 2023-05-09

【中文标题】Wordpress 轮播在 Chrome 中不起作用

【英文标题】：Wordpress carousel won't work in Chrome

【发布时间】：2014-12-16 20:53:39

【问题描述】：

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

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 
  );

);

.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; 

<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>

它在它应该在的 Wordpress 页面上不起作用...http://sunnythesong.com/

【问题讨论】：

您是否尝试过将“包装器”功能更改为(function($) // Your JS here )(jQuery);？

【参考方案1】：

在 SunnyTheSong.com 上失败，因为 "$" 未定义。具体来说，这会失败并出现 JS 错误，说 $ 未定义：

$('.slider')

从以下位置更改您的就绪逻辑：

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

收件人：

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

【讨论】：

你应该看看jQuery noConflict Wrappers。此外，默认情况下，jQuery 已经被 WordPress“排队”。无需从 CDN 再次包含它。

点了，答案更新了。就像你在我之后评论的那样，包装函数仍然需要更新。