光滑的滑块不适用于动态生成的 li

slick slider not working on dynamically generated li

在没有找到解决方案之后:

Wordpress doesn't execute jquery code correctly

我决定改用 slick 滑块,希望它能正常工作,但似乎无法使用 wordpress 和 jquery 为动态内容创建合适的滑块。

我在做什么: 获取 php 中的所有自定义帖子并将其呈现为数组,然后调用以在我的 google 中呈现地图。然后我尝试在所有位置的一侧呈现一个列表。

更多信息:我没有收到控制台错误。

问题: Slick 类 应用于 ul 但未应用于 li

光滑的渲染方式:

functions.php:

add_shortcode('render-map', 'renderMap');
function renderMap(){
    wp_enqueue_style( 'slick_css', get_template_directory_uri() . '/css/slick.css');
    wp_enqueue_style( 'slick_style', get_template_directory_uri() . '/css/slick-theme.css');
    wp_enqueue_style( 'mapStyle', get_template_directory_uri() . '/css/mapStyle.css');
    wp_register_script( 'googleMap', 'https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap', false, false, false );
    wp_enqueue_script( 'googleMap' );
    wp_enqueue_script( 'slick_js', get_template_directory_uri() . '/js/slick.min.js');
    wp_enqueue_script( 'markerClusterer', get_template_directory_uri() . '/js/markerClusterer.js');
    wp_enqueue_script( 'mapRenderer', get_template_directory_uri() . '/js/mapRenderer.js', array(), false, true );
    echo '<div class="interactiveMap"><div class="rowMap">';
    echo '<div id="map-canvas"></div>';
    echo '<div class="sidebarLocation">
        <div class="recentArticles">
            <div class="recentArticlesHeader">
                <a href="#" class="ca_goUp"><i class="fas fa-chevron-up"></i></a>
            </div>
            <ul id="sidebarLocation" class="recentArticlesGroup sidebarLocationUl">';
    global $post;
    $args = array(
        'post_type' => 'map-location',
        'posts_per_page' => -1,
        'post_status' => 'publish'
    );
    $map_locations = get_posts( $args );
    $myResult = renderLocation($map_locations);
    echo '</ul>
        <div class="recentArticlesFooter">
            <a href="#" class="ca_goDown"><i class="fas fa-chevron-down"></i></a>
        </div>
        </div>
        </div>';
    echo '</div></div>';
    echo "<script type='text/javascript'>";
    echo '$( document ).ready(function() {';
    $js_array = json_encode($myResult);
    echo "var javascript_array = ". $js_array . ";\n";
    echo 'gmaps_results_initialize(javascript_array);});';
    echo "</script>";
    wp_enqueue_script( 'slick_call', get_template_directory_uri() . '/js/slick-call.js', array( 'jquery' ), false, false );
}

圆滑-call.js

jQuery(document).ready(function($){
  $('#sidebarLocation').slick({
    arrows: true,
    vertical: true,
    slide: 'li',
    slidesToShow:3,
    slidesToScroll:1,
  });
});

在写了很多 console.log 之后,我注意到即使我在

上调用 slick
jQuery(document).ready

它在所有内容加载完成之前执行。因此,我将它包装在一个函数中并添加了一个延迟,它工作正常:

jQuery(document).ready(function($){
  function start_slick(){
    $('#sidebarLocation').slick({
      arrows: true,
      vertical: true,
      slide: 'li',
      slidesToShow:3,
      slidesToScroll:1,
      prevArrow: $('.ca_goUp'),
      nextArrow: $('.ca_goDown'),
      infinite:false,
    });
  }
  window.setTimeout( start_slick, 2000 );
});