Wordpress/slick.js 居中模式不显示我的图片

Question

我正在尝试将 slick.js 与 Wordpress 中的 ACF 画廊相结合。唯一的问题是我的图像没有显示出来。 example 有谁知道这是什么原因造成的？我已经找了几个小时了，似乎找不到解决办法，我猜我漏掉了什么……

我的代码

index.php

<?php get_header(); ?>
<div class="container">
  <div class="row">
    <div class="col-xs-12 center">
<?php query_posts( 'cat=2' ); ?>
   <?php
   if( have_posts() ):
       while( have_posts() ): the_post(); $i++; ?>

<div class="single-post">


<?php $images = get_field('gallery'); if( $images ): ?> <!– This is the gallery filed slug –>

<div class=”slider”>

<?php foreach( $images as $image ): ?> <!– This is your image loop –>

<div>

<img src=”<?php echo $image['sizes']['large']; ?>” alt=”<?php echo $image['alt']; ?>” />

</div>

<!– Image Slider Code –>

<?php endforeach; ?> <!– This is where the image loop ends –>

</div>

<?php endif; ?> <!– This is where the gallery loop ends –>                  


         <p class="entry-title"><?php the_field('post_titel'); ?></p>
       <p class="metadata">  <?php the_field('post_datum'); ?>
       <span class="metagap">  <?php the_field('post_categorie'); ?></span></p>
    <p class="twocol"><?php the_field('post_tekst', false, false); ?></p>

</div>
<div class="separator"></div>
   <?php endwhile; endif; wp_reset_postdata(); ?>
                  <?php get_footer(); ?>

    </div>

  </div>
</div>

js

jQuery(document).ready(function($){
    $('.slider').slick({
    dots: true,
    centerMode: true,
    infinite: true,
    centerPadding: '60px',
    slidesToShow: 3,
    speed: 500,
    responsive: [{
        breakpoint: 768,
        settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 3
        }
    }, {
        breakpoint: 480,
        settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 1
        }
    }]
});
});

css

   .slick-center .slide-h3{
    color: #FFF;
  }

  .slider{
    width: 600px;  
    height:150px;
    margin: 20px auto;    
    text-align: center;
  }
  .slide-h3{
    margin: 10% 0 10% 0;
    padding: 40% 20%;
    background: #008ed6;
  }
  .slider div{
    margin-right: 5px;
  }

  .slick-slide{
    opacity: .6;
  }

  .slick-center{
    display: block;
    max-width: 10% !important;
    max-height:20% !important;
    opacity: 1;
  }

提前致谢

Answer 1

我发现你对双引号有疑问：

<img src="”4”" alt="”4”">

您使用的是 "fancy curly" 双引号而不是 " 标准双引号。这肯定是个问题。我在您的代码中将所有 ” 替换为 " 并复制了一个示例图像，它成功了！我是用开发工具做的，所以不太容易测试，但我认为这会解决它。

Wordpress/slick.js 居中模式不显示我的图片

Wordpress/slick.js center mode doesn't show my images

wordpress

jquery

slick.js