ACF 리피터 및 플렉스 슬라이더가 작동하지 않음

어떤 이유로 내 이미지가 표시되지 않고 알아낼 수 없습니다. 또한 페이지를 검사 할 때이 오류가 발생합니다. $ (...). onload는 함수가 아닙니다. 슬라이더와 관련된 모든 코드가 문제가 될 수 있습니다. https://www.advancedcustomfields.com/resources/gallery/ACF 리피터 및 플렉스 슬라이더가 작동하지 않음

에 감사

<head> 
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/flexslider.css"> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.flexslider-min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
    $(window).onload(function() { 
     $('.flexslider').flexslider({ 
     animation: "slide" 
     }); 
    }); 

    </script> 
</head> 

<div class="conatainer-fluid"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <?php if(get_field('slider')): ?> 
     <div class="flexslider"> 
      <ul class="slides"> 
      <?php while(has_sub_field('slider')): ?> 
       <li><img class="img-responsive" src="<?php the_sub_field('image'); ?>" alt="Welcome to StairWorld" /></li> 
       <?php endwhile; ?> 
      </ul> 
     </div> 
     <?php endif; ?> 
    </div> 
    </div> 
</div>

출처

2017-05-05 Reece

이 flexslider합니까 .ready : 또한

<!-- Place somewhere in the <head> of your document --> <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="jquery.flexslider.js"></script>

https://woocommerce.com/flexslider/

는, 헤더이 포함 jquery 3으로 작업 - 꽤 오래된 jquery의 이전 버전에서만 작동 할 수 있습니다 – Pete

woocommerce 사이트에 따라 최신 jQuery – Reece

while 루프와 호환됩니까? 아래 내 대답을 참조하십시오. – meck373

-1

내가 보라는 권유 당신이 구축하는 방법을 훌륭한 튜토리얼입니다.

<?php 

$images = get_field('gallery'); 

if($images): ?> 
    <div id="slider" class="flexslider"> 
     <ul class="slides"> 
     <?php foreach($images as $image): ?> 
      <li> 
       <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> 
       <p><?php echo $image['caption']; ?></p> 
      </li> 
     <?php endforeach; ?> 
    </ul> 
</div> 
<div id="carousel" class="flexslider"> 
    <ul class="slides"> 
     <?php foreach($images as $image): ?> 
      <li> 
       <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /> 
      </li> 
     <?php endforeach; ?> 
    </ul> 
</div>

flexslider 파일을 다운로드하고 연결하는 것을 잊지 마십시오.

<!-- Place in the <head>, after the three links --> 
<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
    $('.flexslider').flexslider(); 
    }); 
</script>

출처

2017-05-05 08:57:21 meck373

@pete 나는 대답을 업데이 트하고 링크에서 코드를 복사! – meck373

은 내가 $ (문서)에 .onload $ (창)를 변경했다 그것을 알아 냈다

출처

2017-05-05 09:23:55 Reece

그건 별 차이가 없어야합니다. 저는 많은 플렉스 라이더를 사용하여 윈도우로드 기능에서 시작했습니다. 그러나 그것이 당신을 위해 작동한다면 이상합니다. – Pete

ACF 리피터 및 플렉스 슬라이더가 작동하지 않음

답변

관련 문제