Search code examples
javascriptjqueryanythingslider

jQuery AnythingSlider plugin not working like example shown on demo

I'm working with AnythingSlider and done it exactly the same as how the example page does it, except the example page is working, and mine isn't.

I know the script is at least running because it creates some extra <li> tags with the class 'cloned', but nothing is moving.

JavaScript in the HEAD of the document:

$(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)

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

The plugin example page is here: http://css-tricks.com/examples/AnythingSlider/

I'm tearing my hair out here.

Solution

  • I've not used the AnythingSlider plugin myself, but I do notice that your class attribute is different from theirs.

    you have:

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

    and they have 

     <div class="anythingSlider">

    Try changing yours (and related css) to

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

    or

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

    I tested your html with their css (instead of yours) and it is working. The content is moving as expected.

    I'd recommend taking their example css and modifying it to the style you want as the plugin seems to depend on it.