jQuery AnythingSlider 플러그인이 데모에 표시된 예제처럼 작동하지 않습니다.

Question

AnythingSlider와 함께 작업하고 예제 페이지의 작동 방식과 완전히 동일하게 수행합니다. 단, 예제 페이지가 작동하고 있고, 제 방식은 다릅니다.

'복제 된'클래스가 포함 된 <li> 태그를 추가로 생성하기 때문에 스크립트가 적어도 실행되고 있음을 알고 있지만 아무 것도 움직이지 않습니다. 문서의 HEAD에

자바 스크립트 :

$(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="container_16 anythingSlider" id="slider"> 

또는

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

로 당신 (및 관련 CSS)을 변경 시도

<div class="anythingSlider"> 

있습니다

, 당신은

당신의 CSS 대신 귀하의 HTML을 테스트했는데 효과가 있습니다. 내용이 예상대로 움직입니다.

예를 들어 CSS를 사용하고 플러그인이 원하는 스타일로 수정하는 것이 좋습니다.