光滑的Carousel集成无法正常工作

I have looked through the other answers regarding the Slik Carousel and I cant seem to resolve my issue. As advised in other answers I have attempted to use the CDN hosted js and css files in my and But It still did not work. I followed the instructions on http://kenwheeler.github.io/slick/ to the best of my ability but I am not getting it to work quite right. I am really not so great at Javascript so any input from your guys and gals is greatly appreciated. Here is my code right now.

我已经查看了关于Slik Carousel的其他答案,我似乎无法解决我的问题。正如在其他答案中所建议的那样,我试图在我的中使用CDN托管的js和css文件,但它仍然无效。我尽可能地按照http://kenwheeler.github.io/slick/上的说明进行操作,但我并没有让它正常工作。我真的不是很好的Javascript所以你的家伙和女孩的任何意见非常感谢。这是我现在的代码。

 <div class="featured-areas responsive">
 <div><a href="/lake-oswego-or-homes-for-sale"><img src="/wp-content/uploads/2015/09/lakeoswegojpg.jpg"/></a><a href="/lake-oswego-or-homes-for-sale"><h3 style="text-align:center;">Lake Oswego Homes for Sale</h3></a></div>
  <div><a href="/lake-oswego-or-homes-for-sale"><img src="/wp-content/uploads/2015/09/lakeoswegojpg.jpg"/></a><a href="/lake-oswego-or-homes-for-sale"><h3 style="text-align:center;">Lake Oswego Homes for Sale</h3></a></div>
  <div><a href="/lake-oswego-or-homes-for-sale"><img src="/wp-content/uploads/2015/09/lakeoswegojpg.jpg"/></a><a href="/lake-oswego-or-homes-for-sale"><h3 style="text-align:center;">Lake Oswego Homes for Sale</h3></a></div>
  <div><a href="/lake-oswego-or-homes-for-sale"><img src="/wp-content/uploads/2015/09/lakeoswegojpg.jpg"/></a><a href="/lake-oswego-or-homes-for-sale"><h3 style="text-align:center;">Lake Oswego Homes for Sale</h3></a></div>
  <div><a href="/lake-oswego-or-homes-for-sale"><img src="/wp-content/uploads/2015/09/lakeoswegojpg.jpg"/></a><a href="/lake-oswego-or-homes-for-sale"><h3 style="text-align:center;">Lake Oswego Homes for Sale</h3></a></div>
  <div><a href="/lake-oswego-or-homes-for-sale"><img src="/wp-content/uploads/2015/09/lakeoswegojpg.jpg"/></a><a href="/lake-oswego-or-homes-for-sale"><h3 style="text-align:center;">Lake Oswego Homes for Sale</h3></a></div>
</div>
<script type="text/javascript">$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
</script>

The site can be viewed on a test url as the nameservers are not pointed yet. I appreciate this help as it is going to be an excellent education for me to be able to bring to my clients.

由于名称服务器尚未指向,因此可以在测试URL上查看该站点。我很感激这个帮助,因为这对我来说是一个很好的教育,能够带给我的客户。

it appears that the temp link is not working and the site used to generate the links is not working either. To view the site add the line to the hosts file: 108.178.13.98 findlakeoswegohomes.com

看来临时链接不起作用,用于生成链接的站点也不起作用。要查看该站点,请将该行添加到hosts文件:108.178.13.98 findlakeoswegohomes.com

in the wp-head.php file:

在wp-head.php文件中:

   <?php

// =============================================================================
// VIEWS/INTEGRITY/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Integrity.
// =============================================================================

?>

<?php x_get_view( 'global', '_header' ); ?>

  <?php x_get_view( 'global', '_slider-above' ); ?>

  <header class="<?php x_masthead_class(); ?>" role="banner">
    <?php x_get_view( 'global', '_topbar' ); ?>
    <?php x_get_view( 'global', '_navbar' ); ?>
    <?php x_get_view( 'integrity', '_breadcrumbs' ); ?>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css"/>
  </header>

  <?php x_get_view( 'global', '_slider-below' ); ?>
  <?php x_get_view( 'integrity', '_landmark-header' ); ?>

then in the footer.php file:

然后在footer.php文件中:

<?php

// =============================================================================
// VIEWS/GLOBAL/_FOOTER.PHP
// -----------------------------------------------------------------------------
// Includes the wp_footer() hook and closes out the <body> and <html> tags.
// =============================================================================

?>

  <?php do_action( 'x_before_site_end' ); ?>

  </div> <!-- END #top.site -->

  <?php do_action( 'x_after_site_end' ); ?>

<?php wp_footer(); ?>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
</body>
</html>

I did actually load the css and the js files into a folder on the server called "slick" and linked the stylesheet and js that way but it didnt work so I thought I would try the CDN version of the files to check to see if that was the error.

我确实将css和js文件加载到服务器上名为“slick”的文件夹中,并将样式表和js链接起来,但它没有工作,所以我想我会尝试CDN版本的文件来检查是否有是错误。

1 个解决方案

#1

Your javascript code is not wrapped inside a document ready, try putting your javascript code inside this:

您的javascript代码未包含在文档中,请尝试将您的javascript代码放在此内:

$(function(){
    // Your Code Here
});

Make sure you are including the jQuery library before your <script> above. Also make sure you are including the actual Slick Carousel javascript file (after jQuery library).

确保在上面的

#1