Elastislide沒有出現

Question

我已將Elastislide's代碼放在my website上，但它沒有顯示出來。這些文件完美地放置。我還沒有添加任何圖像，但滑塊沒有正確顯示。請指導。謝謝。

My code: 
<?php 
/** 
* Template Name: Slider 
* 
* @package WordPress 
* @subpackage Twenty_Fourteen 
* @since Twenty Fourteen 1.0 
*/ 
echo " 
     <link rel='stylesheet' type='text/css' href='http://www.tympanus.net/Development/Elastislide/css/demo.css' /> 
     <link rel='stylesheet' type='text/css' href='http://www.tympanus.net/Development/Elastislide/css/elastislide.css' /> 
     <link rel='stylesheet' type='text/css' href='http://www.tympanus.net/Development/Elastislide/css/custom.css' /> 
     <script src='http://www.tympanus.net/Development/Elastislide/js/modernizr.custom.17475.js'></script> 
     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> 
     <script type='text/javascript' src='http://www.tympanus.net/Development/Elastislide/js/jquerypp.custom.js'></script> 
     <script type='text/javascript' src='http://www.tympanus.net/Development/Elastislide/js/jquery.elastislide.js'></script> 
     <script type='text/javascript'> 

      // example how to integrate with a previewer 

      var current = 0, 
       $preview = $('#preview'), 
       $carouselEl = $('#carousel'), 
       $carouselItems = $carouselEl.children(), 
       carousel = $carouselEl.elastislide({ 
        current : current, 
        minItems : 4, 
        onClick : function(el, pos, evt) { 

         changeImage(el, pos); 
         evt.preventDefault(); 

        }, 
        onReady : function() { 

         changeImage($carouselItems.eq(current), current); 

        } 
       }); 

      function changeImage(el, pos) { 

       $preview.attr('src', el.data('preview')); 
       $carouselItems.removeClass('current-img'); 
       el.addClass('current-img'); 
       carousel.setCurrent(pos); 

      } 

     </script> 
"; 
get_header(); 
?> 

<div id='primary' class='container'> 
     <main id='main' role='main'> 
     <div class='col-md-3 inner-sidebar'> 
     <?php get_sidebar(); ?> 
     </div> 
     <?php 
     // Start the loop. 
     while (have_posts()) : the_post(); 

      // Include the page content template. 
      get_template_part('content', 'page'); 

      // If comments are open or we have at least one comment, load up the comment template. 
      if (comments_open() || get_comments_number()) : 
       comments_template(); 
      endif; 
     ?> 
      <div class='col-md-9 col-xs-12 pull-right'> 
      <h2> 
      <?php 
      echo get_the_title($ID); 
      echo '</h2>'; 
      the_content(); 
      ?> 

      </div> 
     <?php 
     // End the loop. 
     endwhile; 
     ?> 

     </main><!-- .site-main --> 

    </div><!-- .content-area --> 


<?php get_footer(); ?> 

Answer 1

與您的代碼替換此

<link rel='stylesheet' type='text/css' href='http://www.tympanus.net/Development/Elastislide/css/demo.css' /> 
<link rel='stylesheet' type='text/css' href='http://www.tympanus.net/Development/Elastislide/css/elastislide.css' /> 
<link rel='stylesheet' type='text/css' href='http://www.tympanus.net/Development/Elastislide/css/custom.css' /> 
<script src='http://www.tympanus.net/Development/Elastislide/js/modernizr.custom.17475.js'></script> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> 
<script type='text/javascript' src='http://www.tympanus.net/Development/Elastislide/js/jquerypp.custom.js'></script> 
<script type='text/javascript' src='http://www.tympanus.net/Development/Elastislide/js/jquery.elastislide.js'></script> 


<script type="text/javascript"> 
    // example how to integrate with a previewer 
    var current = 0; 
    var preview = $('#preview'); 
    var carouselEl = $('#carousel'); 
    var carouselItems = carouselEl.children(); 

    var carousel = carouselEl.elastislide({ 
     current: current, 
     minItems: 4, 
     onClick: function (el, pos, evt) { 

      changeImage(el, pos); 
      evt.preventDefault(); 

     }, 
     onReady: function() { 

      changeImage(carouselItems.eq(current), current); 

     } 
    }); 

    function changeImage(el, pos) { 

     preview.attr('src', el.data('preview')); 
     carouselItems.removeClass('current-img'); 
     el.addClass('current-img'); 
     carousel.setCurrent(pos); 
    } 

</script> 

在頁面底部拿着這個。