PHPackages                             dev7ch/luya-ext-slick - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. dev7ch/luya-ext-slick

ActiveLuya-extension[Utility & Helpers](/categories/utility)

dev7ch/luya-ext-slick
=====================

Responsive and adaptive Yii2 image slider for LUYA as Block, Widget and Module based and Slick.js

v1.1.4(7y ago)2209MITPHP

Since Dec 29Pushed 7y ago2 watchersCompare

[ Source](https://github.com/dev7ch/luya-ext-slick)[ Packagist](https://packagist.org/packages/dev7ch/luya-ext-slick)[ Docs](https://luya.io)[ RSS](/packages/dev7ch-luya-ext-slick/feed)WikiDiscussions master Synced today

READMEChangelog (6)Dependencies (5)Versions (8)Used By (0)

Adaptive and responsive slider extension for LUYA
=================================================

[](#adaptive-and-responsive-slider-extension-for-luya)

[![Latest Stable Version](https://camo.githubusercontent.com/1dd4c7f687ec7127fc43bb876430715ddc0d5673efc7632c6228ba781109bb44/68747470733a2f2f706f7365722e707567782e6f72672f6465763763682f6c7579612d6578742d736c69636b2f762f737461626c65)](https://packagist.org/packages/dev7ch/luya-ext-slick)[![Build Status](https://camo.githubusercontent.com/e1cf60b930894dcfc1c3609ac9b39f97b892914ac1f6ee7bf67f67989da6404f/68747470733a2f2f7472617669732d63692e6f72672f7472617669732d63692f7472617669732d7765622e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/travis-ci/travis-web)[![Coverage Status](https://camo.githubusercontent.com/beae1b3275520d4c38b51f892d22f446f35c5ad27dfd6ae559daa6d112210802/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f6465763763682f6c7579612d6578742d736c69636b2f62616467652e7376673f6272616e63683d6d6173746572)](https://coveralls.io/github/dev7ch/luya-ext-slick?branch=master)[![Code Quality](https://camo.githubusercontent.com/546088bb342d8f2ed855cb03313a7e8418e84fa87999516eb2609a16be72268e/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f6465763763682f6c7579612d6578742d736c69636b2f6261646765732f7175616c6974792d73636f72652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/dev7ch/luya-ext-slick/?branch=master)[![Total Downloads](https://camo.githubusercontent.com/2ba8bdbd18349b212d1c6162536611c1219a183cba02cc806051d239983c5429/68747470733a2f2f706f7365722e707567782e6f72672f6465763763682f6c7579612d6578742d736c69636b2f646f776e6c6f616473)](https://packagist.org/packages/dev7ch/luya-ext-slick)[![License](https://camo.githubusercontent.com/b74396ee48b0a930ff2b4f8efa4946902a3a1a38c555dd1080e52edc1807f5f0/68747470733a2f2f706f7365722e707567782e6f72672f6465763763682f6c7579612d6578742d736c69636b2f6c6963656e7365)](https://packagist.org/packages/dev7ch/luya-ext-slick)

Implements the responsive SlickSlider from Ken Wheeler as a LUYA widget which can be used out of the box in the LUYA admin UI as draggable block extension in your project.

See the [slider demo page](http://kenwheeler.github.io/slick/#demos).

This is an yii2 extension for [LUYA](https://luya.io/).

Features
--------

[](#features)

- Adaptive images based on screen min-width and/or orientation
- Optionally addition of retina images separately
- Reusable widget which can be included in own custom view files
- Picturefill included for better browser support of `` tag
- Schema.org standards for images gallery are in charge
- Multilingual LUYA admin UI support
- Responsive and touch friendly

Installation
------------

[](#installation)

1. Add the composer package to your project:

```
composer require dev7ch/luya-ext-slick
```

2. Run import

```
./luya import
```

Usage
-----

[](#usage)

This LUYA extension is usable in two ways:

- As draggable block out of the box in the LUYA admin UI.
- As PHP widget in custom view files with custom Slick.js settings.

### 1. Block Usage

[](#1-block-usage)

Simply drag and drop the block in the pages section in the admin UI to the desired place and add content to your new slick slider.

### 2. Widget Usage

[](#2-widget-usage)

This extension is shipped as widget which means it can the reused in own custom views from modules or blocks.

Example usage in a block view file:

```
extraValue('images'); // Array of images width additional fields

?>

     $images,
        'slickConfigWidget' => [
            'infinite' => 'true',
            'slidesToShow' => '1',
            'slidesToScroll' => '1',
            'autoplay' => 'true',
            'autoplaySpeed' => '5000' // see all available configs http://kenwheeler.github.io/slick/#settings
        ]
    ])
    ?>

```

Or you could load the Slick.js configs from a file like this:

```

```

The beginning of the path points to your project root folder (not web root, which is directory `public_html`).

> Using `slickConfigFile` will override `slickConfigWidget` if it is configured.

Due this widget supports adaptive images, below a little explanation of the logic behind.

The single image and additional info are delivered as an array:

```

    images as $image):
        $title = $image['title'];
        $link = $image['link'];
        $imageFallback = $image['image']->source;
        $respImages = $image['responsive_images'];
        $alt = $image['alt'];
    ?>

        // ... slider content array

```

The array of the single image includes an nested array for adaptive images, in particular:

```
// ... wrapped by foreach loop with vars declaration

       link.'" itemprop="contentUrl">';} ?>

               source;
                   $imageHD = $item['imageHD'] ? $item['imageHD']->source : $item['image']->source;
                   $orientation = $item['orientation'] ? ' and (orientation:'.$item['orientation'].')' : '';
                   $breakpoint = $item['breakpoint'] ? ' media="(min-width:'.$item['breakpoint'].'px)'.$orientation.'"' : 'media="(min-width:0)'.$orientation.'"';
               ?>