public function SlickSkin::skins in Slick Carousel 7.3

Same name and namespace in other branches

8.2 src/SlickSkin.php \Drupal\slick\SlickSkin::skins()
8 src/SlickSkin.php \Drupal\slick\SlickSkin::skins()

Returns the Slick skins.

This can be used to register skins for the Slick. Skins will be available when configuring the Optionset, Field formatter, or Views style, or custom coded slicks. It is permanently cached, so you won't see changes when adding new ones till cache clearing.

Slick skins get a unique CSS class to use for styling, e.g.: If your skin name is "my_module_slick_carousel_rounded", the CSS class is: slick--skin--my-module-slick-carousel-rounded.

A skin can specify CSS and JS files to include when Slick is displayed, except for a thumbnail skin which accepts CSS only. Each skin with its assets (CSS, JS, or library dependencies) is registered as regular Drupal libraries via hook_library() at SlickLibrary::library(). The final library can be loaded like: ['slick', 'provider.group.name'].

Each skin supports a few keys:

name: The human readable name of the skin.
description: The description about the skin, for help and manage pages.
dependencies: An array of library dependencies.
css: An array of CSS files to attach.
js: An array of JS files to attach, e.g.: image zoomer, reflection, etc.
options: An array of JS options to be included within [data-slick] such as when integrating extra libraries defined at `js` which later can be accessed by JS via [data-slick] to work with.
group: A string grouping the current skin: main, thumbnail.
dependencies: SImilar to how core library dependencies constructed.
provider: A module name registering the skins.
options: Extra JavaScript (Slicebox, 3d carousel, etc) options merged into existing [data-slick] attribute to be consumed by custom JS.

Return value

array The array of the main and thumbnail skins.

Overrides SlickSkinInterface::skins

File

src/SlickSkin.php, line 13

Class

SlickSkin: Implements SlickSkinInterface.

Namespace

Drupal\slick

Code

public function skins() {
  $path = drupal_get_path('module', 'slick');
  $skins = [
    'default' => [
      'name' => 'Default',
      'css' => [
        $path . '/css/theme/slick.theme--default.css' => [],
      ],
    ],
    'asnavfor' => [
      'name' => 'Thumbnail: asNavFor',
      'css' => [
        $path . '/css/theme/slick.theme--asnavfor.css' => [],
      ],
      'description' => t('Affected thumbnail navigation only.'),
    ],
    'classic' => [
      'name' => 'Classic',
      'description' => t('Adds dark background color over white caption, only good for slider (single slide visible), not carousel (multiple slides visible), where small captions are placed over images.'),
      'css' => [
        $path . '/css/theme/slick.theme--classic.css' => [],
      ],
    ],
    'fullscreen' => [
      'name' => 'Full screen',
      'description' => t('Adds full screen display, works best with 1 slidesToShow.'),
      'css' => [
        $path . '/css/theme/slick.theme--full.css' => [],
        $path . '/css/theme/slick.theme--fullscreen.css' => [],
      ],
    ],
    'fullwidth' => [
      'name' => 'Full width',
      'description' => t('Adds .slide__constrained wrapper to hold caption overlay within the max-container.'),
      'css' => [
        $path . '/css/theme/slick.theme--full.css' => [],
        $path . '/css/theme/slick.theme--fullwidth.css' => [],
      ],
    ],
    'grid' => [
      'name' => 'Grid Foundation',
      'description' => t('Use slidesToShow > 1 to have more grid combination, only if you have considerable amount of grids, otherwise 1.'),
      'css' => [
        $path . '/css/theme/slick.theme--grid.css' => [],
      ],
    ],
    'split' => [
      'name' => 'Split',
      'description' => t('Puts image and caption side by side, requires any split layout option.'),
      'css' => [
        $path . '/css/theme/slick.theme--split.css' => [],
      ],
    ],
  ];
  foreach ($skins as $key => $skin) {
    $skins[$key]['group'] = $key == 'asnavfor' ? 'thumbnail' : 'main';
    $skins[$key]['provider'] = 'slick';
  }
  return $skins;
}

You are here