public function SlickSkin::skins in Slick Carousel 8

Same name and namespace in other branches

8.2 src/SlickSkin.php \Drupal\slick\SlickSkin::skins()
7.3 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.

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 supports 5 keys:

name: The human readable name of the skin.
description: The description about the skin, for help and manage pages.
css: An array of CSS files to attach.
js: An array of JS files to attach, e.g.: image zoomer, reflection, etc.
group: A string grouping the current skin: main, thumbnail.
provider: A module name registering the skins.

Return value

array The array of the main and thumbnail skins.

Overrides SlickSkinInterface::skins

File

src/SlickSkin.php, line 17

Class

SlickSkin: Implements SlickSkinInterface.

Namespace

Drupal\slick

Code

public function skins() {
  $skins = [
    'default' => [
      'name' => 'Default',
      'css' => [
        'theme' => [
          'css/theme/slick.theme--default.css' => [],
        ],
      ],
    ],
    'asnavfor' => [
      'name' => 'Thumbnail: asNavFor',
      'css' => [
        'theme' => [
          'css/theme/slick.theme--asnavfor.css' => [],
        ],
      ],
      'description' => $this
        ->t('Affected thumbnail navigation only.'),
    ],
    'classic' => [
      'name' => 'Classic',
      'description' => $this
        ->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' => [
        'theme' => [
          'css/theme/slick.theme--classic.css' => [],
        ],
      ],
    ],
    'fullscreen' => [
      'name' => 'Full screen',
      'description' => $this
        ->t('Adds full screen display, works best with 1 slidesToShow.'),
      'css' => [
        'theme' => [
          'css/theme/slick.theme--full.css' => [],
          'css/theme/slick.theme--fullscreen.css' => [],
        ],
      ],
    ],
    'fullwidth' => [
      'name' => 'Full width',
      'description' => $this
        ->t('Adds .slide__constrained wrapper to hold caption overlay within the max-container.'),
      'css' => [
        'theme' => [
          'css/theme/slick.theme--full.css' => [],
          'css/theme/slick.theme--fullwidth.css' => [],
        ],
      ],
    ],
    'grid' => [
      'name' => 'Grid Foundation',
      'description' => $this
        ->t('Use slidesToShow > 1 to have more grid combination, only if you have considerable amount of grids, otherwise 1.'),
      'css' => [
        'theme' => [
          'css/theme/slick.theme--grid.css' => [],
        ],
      ],
    ],
    'split' => [
      'name' => 'Split',
      'description' => $this
        ->t('Puts image and caption side by side, requires any split layout option.'),
      'css' => [
        'theme' => [
          '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