用于 Wordpress 的 JQuery + Slick Slider 和 ACF

Question

我正在尝试使用 ACF 中继器和光滑滑块通过 Wordpress 创建一个推荐滑块。我的结果显示在多行而不是滑块中。我尝试了很多方法，但似乎都没有奏效，并且被困了好几天。我是否错过了整个过程中必不可少的东西？

 &#testimonial {
         .slick-slide {
            pointer-events: none;
            padding: 2em .5em 0;
            text-align: center;
            .cover {
               width: 100%;
               padding-bottom: 60%;
               background-size: cover;
               background-position: 50% 50%;
            }
            &.slick-current {
               pointer-events: auto;
               .text-container {
                  opacity: 1;
               }
            }
            &.slick-active {
               
            }
         }
         .slick-prev,
         .slick-next {
            top: 40%;
            background-image: url(../../images/icon-ui-arrows.svg);
            background-size: 200% 100%;
            &::before {
               display: none;
            }
         }
         .slick-prev {
            background-position: 0 0;
         }
         .slick-next {
            background-position: -100% 0;
         }
         padding-bottom: 8em;
         .section-title {
            br {
               display: none;
            }
         }
         .text-container {
            margin-bottom: 2em;
            p {
               margin: 0;
               br {
                  display: none;
               }
            }
         }
         
      }   

我做了一些编辑并更改了我的 php，但现在箭头不会响应。

      <div class="dev-slider-row">
               <div class="slider-for">
         <?php if (have_rows('testimonial')): ?>
            <?php
                        $quote = get_sub_field('author_quote');
                        $author_name = get_sub_field('author_name');
                        $author_position = get_sub_field('author_position');
                        $company_name = get_sub_field('company_name');
                        ?>
               <div class="slick-container">
               <?php while (have_rows('testimonial')): the_row(); ?>
              
                  <blockquote>
                     <p><?= get_sub_field('author_quote'); ?></p>
                     <cite>
                        <?= get_sub_field('author_name'); ?><br>
                        <?= get_sub_field('author_position') . ', ' . get_sub_field('company_name'); ?>
                     </cite>
                  </blockquote>
        
                  <?php endwhile; ?>
            </div>
         <?php endif; ?>
      </div>
      </div>
      <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script type="text/javascript">
   $(window).on('load', function() {
  //Single Item 
  $('#testimonial').slick({
        infinite: true,
        arrows: true
  });
  </script>   



<script type="text/javascript">
 jQuery(document).ready(function($){
$('.slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   asNavFor: '.slider-for',
   arrows: true,
   speed: 500,
   fade: true,
   autoplay: false
   });
});
</script> 
 &#testimonial {
         .slick-slide {
            pointer-events: none;
            padding: 2em .5em 0;
            text-align: center;
            .cover {
               width: 100%;
               padding-bottom: 60%;
               background-size: cover;
               background-position: 50% 50%;
            }
            &.slick-current {
               pointer-events: auto;
               .text-container {
                  opacity: 1;
               }
            }
            &.slick-active {
               
            }
         }
         .slick-prev,
         .slick-next {
            top: 40%;
            background-image: url(../../images/icon-ui-arrows.svg);
            background-size: 200% 100%;
            &::before {
               display: none;
            }
         }
         .slick-prev {
            background-position: 0 0;
         }
         .slick-next {
            background-position: -100% 0;
         }
         padding-bottom: 8em;
         .section-title {
            br {
               display: none;
            }
         }
         .text-container {
            margin-bottom: 2em;
            p {
               margin: 0;
               br {
                  display: none;
               }
            }
         }
         blockquote {
            font-family: 'HelveticaNeue-CondensedBlack', 'Helvetica Neue';
            max-width: 100%;
            line-height: 1.3;
            position: relative;
            padding: 0.5rem;
            background:  #0024EE;
            color: white;

            &:before {
               content: '\201C';
               position: absolute;
               top:-10px;
               left: 0;
               font-family: Arial, sans-serif;
               font-size: 82px;
               font-style: normal;
             }
             &:after {
               content: '\201C';
               position: absolute;
               bottom: -60px;
               right: 0;
               font-family: Arial, sans-serif;
               font-size: 82px;
               font-style: normal;
             }
             
             blockquote, p { 
                margin:0.5em; 
                text-align: center;
                font-family: Open Sans;
                font-weight: bold;
                font-size: 1em;
            }
             blockquote p:first-child { margin-top: 0; }  

         blockquote,cite {
            font-size: 1em;
            font-family: Open Sans;
            line-height: 1.4;
            text-align: center;
            display:block;
            color:white;
            font-style: normal;
            margin:0.5em;
         }
         
      }    
I am also using ACF Repeater to display the codes. But I am unsure on how to make the slider via slick. 
 <section id="testimonial" class="slick-initialized">
      <div class="container">
         <div class="row justify-content-center">
         <?php if (have_rows('testimonial')): ?>
            <?php
                        $quote = get_sub_field('author_quote');
                        $author_name = get_sub_field('author_name');
                        $author_position = get_sub_field('author_position');
                        $company_name = get_sub_field('company_name');
                        ?>
               <div class="slick-slider">
               <?php while (have_rows('testimonial')): the_row(); ?>
              
                 > Blockquote
                     <p><?= get_sub_field('author_quote'); ?></p>
                     <cite>
                        <?= get_sub_field('author_name'); ?><br>
                        <?= get_sub_field('author_position') . ', ' . get_sub_field('company_name'); ?>
                     </cite>
                  

> </blockquote>

        
                  <?php endwhile; ?>
               </div>
         <?php endif; ?>
      </div>
      </div>
      

</section>

Answer 1

我对代码做了一些进一步的调整。现在我似乎无法让我的滑块箭头移动。

<script type="text/javascript">
 jQuery(document).ready(function($){
$('.slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   asNavFor: '.slider-for',
   arrows: true,
   speed: 500,
   fade: true,
   autoplay: false
   });
});
</script>