jQuery AnythingSlider 插件无法像演示中所示的示例那样工作

Question

我正在使用 AnythingSlider，其操作方式与示例页面的操作方式完全相同，只是示例页面可以正常工作，而我的则不能。

我知道该脚本至少正在运行，因为它创建了一些带有“克隆”类的额外

标记，但没有任何移动。

文档头部的 JavaScript：

$(function () {
   $('#slider').anythingSlider({
      easing: "swing",           // Anything other than "linear" or "swing" 
                                  // requires the easing plugin
      autoPlay: true,            // turns off the entire FUNCTIONALitY
      startStopped: false,       // force it to start stopped if autoplay is on
      delay: 3000,               // time between slide transitions in AutoPlay
      animationTime: 600,        // time the slide transition takes
      hashTags: true,            // Should links change the hashtag in the URL?
      buildNavigation: false,    // if true builds and 
                                  // list of anchor links to link to each slide
      pauseOnHover: false,       // pause on hover if true and autoPlay enabled
      startText: "Start",        // Start text
      stopText: "Stop",          // Stop text
      navigationFormatter: null  // Details at the top of the file on this use
   });
});

(jQuery and the plugin are externally called)

HTML

<div class="container_16 slider" id="slider">
  <div class="wrapper">
      <ul>
          <li>
              <?php echo html::image('resources/images/featuredweb.gif', array('alt' => ' ', 'class' => 'slider-icon')); ?>
              <?php echo html::image('resources/images/website.gif', array('alt' => ' ', 'class' => 'imgborder')); ?>
              <div class="content">
                  <h3>D'Portfolio Theme</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque massa tortor, fermentum ut pellentesque eu, mollis vitae lectus. </p>
                  <strong>Client Name : john doe</strong><br />
                  <strong>Requirement : php / Mysql / Adobe / CSS</strong><br />
              </div>
          </li>
          <li>
              <?php echo html::image('resources/images/featuredweb.gif', array('alt' => ' ', 'class' => 'slider-icon')); ?>
              <?php echo html::image('resources/images/website.gif', array('alt' => ' ', 'class' => 'imgborder')); ?>
              <div class="content">
                  <h3>D'Portfolio Theme</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque massa tortor, fermentum ut pellentesque eu, mollis vitae lectus. </p>
                  <strong>Client Name : john doe</strong><br />
                  <strong>Requirement : php / Mysql / Adobe / CSS</strong><br />
              </div>
          </li>
          <li>
              <?php echo html::image('resources/images/featuredweb.gif', array('alt' => ' ', 'class' => 'slider-icon')); ?>
              <?php echo html::image('resources/images/website.gif', array('alt' => ' ', 'class' => 'imgborder')); ?>
              <div class="content">
                  <h3>D'Portfolio Theme</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque massa tortor, fermentum ut pellentesque eu, mollis vitae lectus. </p>
                  <strong>Client Name : john doe</strong><br />
                  <strong>Requirement : php / Mysql / Adobe / CSS</strong><br />
              </div>
          </li>
      </ul>    
  </div>
</div>

插件示例页面位于： http://css- tricks.com/examples/AnythingSlider/

我在这里抓狂了。

Answer 1

我自己没有使用过 AnythingSlider 插件，但我确实注意到你的类属性与他们的不同。

你有：

 <div class="container_16 slider" id="slider">

并且他们已经

 <div class="anythingSlider">

尝试将你的（和相关的CSS）更改为

 <div class="container_16 anythingSlider" id="slider">

或者

 <div class="container_16 slider anythingSlider" id="slider">

我用他们的CSS（而不是你的）测试了你的html并且它正在工作。内容正在按预期进行。

我建议采用他们的示例 css 并将其修改为您想要的样式，因为该插件似乎依赖于它。