Hi @paupixel,
here’s the thing: This plugin does not officially support page builders like Divi because it’s an extension to the native WordPress gallery (see the plugins’s description).
Since the thumbnail feature has been requested multiple times now, I nonetheless decided to provide a solution to automatically add thumbnails below the slider.
Paste this into your Child Theme’s function.php:
add_filter( 'slick_slider_html', 'slick_slider_clone_slider', 10, 2 );
function slick_slider_clone_slider( $output, $post_id ) {
remove_filter( 'slick_slider_html', 'slick_slider_clone_slider' );
$atts = array_merge(
get_post_gallery( $post_id, false ),
[
'size' => 'thumbnail',
'sl_fade' => 'false',
'sl_focusonselect' => 'true',
'sl_asnavfor' => '#slick-slider-1',
'sl_slidestoshow' => 4,
]
);
$atts_string = '';
foreach ( $atts as $key => $value ) {
if ( 'src' === $key ) {
continue;
}
$atts_string .= " $key=$value";
};
$output .= do_shortcode( '[gallery' . $atts_string . ']' );
return $output;
};
What does the code do? It uses a filter to clone the slider below the original one (just once). Some of the settings are changed to make it a thumbnail slider. You may want to adjust size and sl_slidestoshow ( = slidesToShow) to your specific needs.
Please note that this code only works for the first slider on every post/page. Also, you should set original slider’s asNavFor setting to #slick-slider-3. Don’t get confused by the number 3, due to technical reasons the cloned slider has this id.
If this was useful, I’d really appreciate if you could give the plugin a 5 star rating. The level of support I provide here for free is very time consuming. Rating (and donating) keeps me motivated offering this amount of support in my leisure time. Thanks!
