Плагин jQuery AnythingSlider не работает, как показано в примере - PullRequest
Новая
       16

Плагин jQuery AnythingSlider не работает, как показано в примере

0 голосов
/ 19 сентября 2009

Я работаю с AnythingSlider и сделал это точно так же, как это делает страница примера, за исключением того, что страница примера работает, а моя нет.

Я знаю, что скрипт по крайней мере работает, потому что он создает несколько дополнительных <li> тегов с классом 'клонированный', но ничего не движется.

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 /

Я тут рву волосы.

1 Ответ

1 голос
/ 19 сентября 2009

Я сам не использовал плагин 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">

Я проверил ваш html с их css (вместо вашего), и он работает. Содержание движется, как и ожидалось.

Я бы порекомендовал взять их пример css и изменить его в соответствии с желаемым стилем, поскольку плагин, кажется, зависит от него.

...