CODEWITHSUNDEEP
javascriptjquerywordpressslick.js
Mederic
Mederic

Reputation: 2019

slick slider not working on dynamically generated li

After not finding a solution for this:

Wordpress doesn't execute jquery code correctly

I have decided to change to slick slider hoping it woul work but seems it's impossible to create a proper slider with wordpress and jquery for dynamic content.

What I'm doing: getting all the custom posts in php and rendering it as an array then called to be rendered in my google map. I then try to render a list on the side of all locations.

More Info: I do not get console errors.

Problem: Slick classes get applied to the ul but dont apply to the li

How slick renders:

ignoring 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 );
}

slick-call.js

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

Upvotes: 0

Views: 4603

Answers (1)

Mederic
Mederic

Reputation: 2019

After writing many console.log I noticed that even I was calling slick on

jQuery(document).ready

it was executing before everything finished loading. Thus I have wrapped it in a function and added a delay ans it works fine:

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 );
});

Upvotes: 2

Related Questions