css - Elastislide 未显示

Question

我已经放置了Elastislide's my website 上的代码但它没有出现。文件放置完美。我还没有添加任何图像，但 slider 显示不正确。

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>

把这个放在页面底部。