Css Elastislide没有出现

我已在上放置了代码，但它没有显示。这些文件放得很好。我还没有添加任何图像，但滑块没有正确显示

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(); ?>

我的代码：

将此代码替换为您的代码

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

//如何与预览器集成的示例
无功电流=0；
变量预览=$（“#预览”）；
var carouselEl=$（“#carousel”）；
var carouselItems=carouselEl.children（）；
var carousel=carouselEl.elastislide({
电流：电流，
最小项：4，
onClick：功能（el、pos、evt）{
更改图像（el、pos）；
evt.preventDefault（）；
},
onReady:function（）{
changeImage（carouselItems.eq（当前），当前）；
}
});
功能更改图像（el、pos）{
preview.attr（'src'，el.data（'preview'）；
carouselItems.removeClass（'current-img'）；
el.addClass（“当前img”）；
转盘设置电流（pos）；
}

---

把这个放在页面底部。

@cracker:因为WordPress，它正在改变。我已经粘贴了相同的CSS。@cracker:我已经在底部移动了它。仍然没有任何改变。你忘了在底部的脚本和链接了！！您忘记关闭脚本标记。就在上面//示例如何与预览行集成脚本已开始在网站上显示为文本。放置您的代码。脚本仍然没有出现。该变量在代码中的任何地方都是不可见的。奇怪的