public function SlickExtrasSkin::skins in Slick extras 7.3

Same name and namespace in other branches

8 src/SlickExtrasSkin.php \Drupal\slick_extras\SlickExtrasSkin::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/SlickExtrasSkin.php, line 15

Class

SlickExtrasSkin: Implements SlickSkinInterface as registered via hook_slick_skins_info().

Namespace

Drupal\slick_extras

Code

public function skins() {
  $slick = drupal_get_path('module', 'slick');
  $path = drupal_get_path('module', 'slick_extras');
  $skins = [
    'd3-back' => [
      'name' => t('X 3d back'),
      'group' => 'main',
      'provider' => 'slick_extras',
      'css' => [
        $path . '/css/theme/slick.theme--d3-back.css' => [],
      ],
      'description' => t('Adds 3d view with focal point at back, works best with 3 slidesToShow, and caption below.'),
    ],
    'boxed' => [
      'name' => t('X Boxed'),
      'group' => 'main',
      'provider' => 'slick_extras',
      'description' => t('Adds margins to the sides of slick-list revealing arrows.'),
      'css' => [
        $path . '/css/theme/slick.theme--boxed.css' => [],
      ],
    ],
    'boxed-carousel' => [
      'name' => t('X Box carousel'),
      'group' => 'main',
      'provider' => 'slick_extras',
      'description' => t('Carousel that has margins, alternative to centerMode.'),
      'css' => [
        $path . '/css/theme/slick.theme--boxed.css' => [],
        $path . '/css/theme/slick.theme--boxed--carousel.css' => [],
      ],
    ],
    'boxed-split' => [
      'name' => t('X Box split'),
      'group' => 'main',
      'provider' => 'slick_extras',
      'description' => t('Adds margins and split caption and image.'),
      'css' => [
        $path . '/css/theme/slick.theme--boxed.css' => [],
        $slick . '/css/theme/slick.theme--split.css' => [],
      ],
    ],
    'rounded' => [
      'name' => t('X Rounded'),
      'group' => 'main',
      'provider' => 'slick_extras',
      'description' => t('Rounds the .slide__image, great for 3-5 visible-slides carousel.'),
      'css' => [
        $path . '/css/theme/slick.theme--rounded.css' => [],
      ],
    ],
    'vtabs' => [
      'name' => t('X VTabs'),
      'group' => 'thumbnail',
      'provider' => 'slick_extras',
      'description' => t('Adds a vertical tabs like thumbnail navigation.'),
      'css' => [
        $path . '/css/theme/slick.theme--vtabs.css' => [],
      ],
    ],
  ];
  return $skins;
}

You are here