function my_module_render_slick_asnavfor in Slick Carousel 7.2

AsNavFor sample #3.

Requirements for asNavFor:

• $settings['current_display'] = 'thumbnail'; Must be defined explicitly only for the thumbnail $settings.

• $options['asNavFor'] = '#TARGETID-slider'; Defined for both slick main and thumbnail where "TARGETID-slider" is the actual target which is placed within the $content_attributes.

See the HTML structure below to get a clear idea.

1. Main slider: <div id="slick-for" class="slick slick-processed"> <div class="slick__slider slick-initialized slick-slider"> <div class="slick__slide"></div> </div> </div>

2. Thumbnail slider: <div id="slick-nav" class="slick slick-processed"> <div class="slick__slider slick-initialized slick-slider"> <div class="slick__slide"></div> </div> </div>

At both cases, asNavFor should target slick-initialized class/ID attributes, hence "#slick-for-slider" and "#slick-nav-slider" respectively. Note the "#" before the ID. Slick is expecting valid CSS selector. The suffix "-slider" is automatically added by module.

File

./slick.api.php, line 238

Hooks and API provided by the Slick module.

Code

function my_module_render_slick_asnavfor() {
  $slick = array();

  // 1. Main slider ------------------------------------------------------------
  // Main caption contain: editor, overlay, title, alt, data, link.
  // Add items.
  $items = array();

  // Use slick_get_image() to have lazyLoad, or theme_image_style/theme_image.
  $images = array(
    1,
    2,
    3,
    4,
    6,
    7,
  );
  foreach ($images as $key) {
    $items[] = array(
      'slide' => '<img src="/sites/all/images/image-0' . $key . '.jpg" width="1140" />',
      'caption' => array(
        'title' => 'Description #' . $key,
      ),
    );
  }

  // Add options.
  $options = array(
    // If the main slick ID is "slick-for", the asNavfor target is targetting
    // the thumbnail slider ID, suffixed with "-slider" automatically.
    'asNavFor' => '#slick-nav-slider',
    'arrows' => FALSE,
    'centerMode' => TRUE,
    'centerPadding' => '',
  );

  // Satisfy requirements for the main asnavfor.
  $settings = array(
    'optionset' => 'optionset_main',
    'id' => 'slick-for',
  );

  // Build the main slider.
  $attach = array();
  $slick[0] = slick_build($items, $options, $settings, $attach);

  // 2. Thumbnail slider -------------------------------------------------------
  // Thumbnail caption only accepts: data.
  $items = array();
  foreach ($images as $key) {
    $items[] = array(
      'slide' => '<img src="/sites/all/images/image-0' . $key . '.jpg" width="210" />',
      'caption' => array(
        'data' => 'Description #' . $key,
      ),
    );
  }

  // Add options.
  $options = array(
    // If the thumbnail slick ID is "slick-nav", the asNavfor target is
    // targetting the main slider ID, suffixed with "-slider" automatically.
    'asNavFor' => '#slick-for-slider',
    'arrows' => TRUE,
    'centerMode' => TRUE,
    'centerPadding' => '10px',
    // Be sure to have multiple slides for the thumbnail, otherwise nonsense.
    'slidesToShow' => 5,
  );

  // Satisfy requirements for the thumbnail asnavfor.
  $settings = array(
    'optionset' => 'optionset_thumbnail',
    // Must define 'current_display' explicitly to 'thumbnail'.
    'current_display' => 'thumbnail',
  );

  // Build the thumbnail slider, empty $attach means basic libraries only.
  $attach = array();
  $slick[1] = slick_build($items, $options, $settings, $attach);

  // Pass both slicks to theme_slick_wrapper() to get a wrapper.
  $element = array(
    '#theme' => 'slick_wrapper',
    '#items' => $slick,
  );
  return $element;
}