Title: Thumbnails
Last modified: February 5, 2018

---

# Thumbnails

 *  Resolved [paupixel](https://wordpress.org/support/users/paupixel/)
 * (@paupixel)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/thumbnails-112/)
 * Great plugin!
 * Is it possible to show thumbnails under the slider?
 * Thanks
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fthumbnails-112%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Plugin Author [Philipp Bammes](https://wordpress.org/support/users/tyrannous/)
 * (@tyrannous)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/thumbnails-112/#post-9961769)
 * Hi [@paupixel](https://wordpress.org/support/users/paupixel/),
    sorry for the
   delay; I was on vacation.
 * Please check [slick’s documentation](http://kenwheeler.github.io/slick/) (scroll
   down to “Slider Syncing”). Also, [https://wordpress.org/support/topic/transform-translate3d-1285px-0px-0px-going-off-screen/#post-9907057](https://wordpress.org/support/topic/transform-translate3d-1285px-0px-0px-going-off-screen/#post-9907057)
   might by useful.
 *  Thread Starter [paupixel](https://wordpress.org/support/users/paupixel/)
 * (@paupixel)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/thumbnails-112/#post-9970582)
 * where should I place this code?
 * `
    $(‘.slider-for’).slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false,
   fade: true, asNavFor: ‘.slider-nav’ }); $(‘.slider-nav’).slick({ slidesToShow:
   3, slidesToScroll: 1, asNavFor: ‘.slider-for’, dots: true, centerMode: true, 
   focusOnSelect: true });
 *  Plugin Author [Philipp Bammes](https://wordpress.org/support/users/tyrannous/)
 * (@tyrannous)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/thumbnails-112/#post-9980586)
 * [@paupixel](https://wordpress.org/support/users/paupixel/),
    make sure to read
   [https://wordpress.org/support/topic/using-asnavfor-option/](https://wordpress.org/support/topic/using-asnavfor-option/)
   which is linked in the thread mentioned above.
 *  Thread Starter [paupixel](https://wordpress.org/support/users/paupixel/)
 * (@paupixel)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/thumbnails-112/#post-9984946)
 * Hi Philipp, thanks again, I really apologize if I’m being thick
 * After reading all docs, I still not understand how to do it. I don’t understand**
   where** exactly I’m supposed to apply the code:
 *     ```
       $('.slider-for').slick({
         slidesToShow: 1,
         slidesToScroll: 1,
         arrows: false,
         fade: true,
         asNavFor: '.slider-nav'
       });
       $('.slider-nav').slick({
         slidesToShow: 3,
         slidesToScroll: 1,
         asNavFor: '.slider-for',
         dots: true,
         centerMode: true,
         focusOnSelect: true
       });
       ```
   
 * In my case, I’m building a WP website for a client (I use Divi) and she needs
   to be able to generate easily slideshow galleries with thumbnails; so the option
   of having to duplicate each gallery and have to sync each slide using code is
   not ideal.
 * So is there an alternative option?
 * Again, many thanks and apologies if I miss something
 *  Thread Starter [paupixel](https://wordpress.org/support/users/paupixel/)
 * (@paupixel)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/thumbnails-112/#post-9985141)
 * I understand I have to create 2 identical galleries and refer the id so one navigates
   the other
 *  Plugin Author [Philipp Bammes](https://wordpress.org/support/users/tyrannous/)
 * (@tyrannous)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/thumbnails-112/#post-9990877)
 * Hi [@paupixel](https://wordpress.org/support/users/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](https://wordpress.org/plugins/slick-slider/#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](https://wordpress.org/support/plugin/slick-slider/reviews/#new-post).
   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!
 *  Plugin Author [Philipp Bammes](https://wordpress.org/support/users/tyrannous/)
 * (@tyrannous)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/thumbnails-112/#post-10023218)
 * Hi [@paupixel](https://wordpress.org/support/users/paupixel/),
    have you been
   able to review my response? I’d really like to see this thread resolved.
 *  Thread Starter [paupixel](https://wordpress.org/support/users/paupixel/)
 * (@paupixel)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/thumbnails-112/#post-10024063)
 * Hi Philipp, no I didn’t see it till now, sorry!
    I moved now to an alternative
   solution, but I’ll definitively check it out thanks!
 *  Plugin Author [Philipp Bammes](https://wordpress.org/support/users/tyrannous/)
 * (@tyrannous)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/thumbnails-112/#post-10024194)
 * Ok, so for now I’ll set the thread to `resolved`. Feel free to open it again 
   if you have any question.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Thumbnails’ is closed to new replies.

 * ![](https://ps.w.org/slick-slider/assets/icon.svg?rev=1520493)
 * [Slick Slider](https://wordpress.org/plugins/slick-slider/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/slick-slider/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/slick-slider/)
 * [Active Topics](https://wordpress.org/support/plugin/slick-slider/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/slick-slider/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/slick-slider/reviews/)

## Tags

 * [clone](https://wordpress.org/support/topic-tag/clone/)
 * [thumbnail](https://wordpress.org/support/topic-tag/thumbnail/)

 * 9 replies
 * 2 participants
 * Last reply from: [Philipp Bammes](https://wordpress.org/support/users/tyrannous/)
 * Last activity: [8 years, 2 months ago](https://wordpress.org/support/topic/thumbnails-112/#post-10024194)
 * Status: resolved