@undkonsorten/slider NPM

undkonsorten slider package (@undkonsorten/slider)

The undkonsorten slider package is a slider template basis for the undkonsorten frontend-kickstart based on slick.

Installation

npm install @undkonsorten/slider --save

Attention: the npm update won't work anymore once you add a Git repository to your node_modules/@undkonsorten/slider folder.

Semantic versioning

Inside the package.json of your project where you are using the npm package, you can specify which kinds of update you will accept for the npm package.

Use ~ for patch releases. This will only update the package if its version changes like this: 1.0.0 -> 1.0.1
```
"@undkonsorten/slider": "~1.0.0"
```
Use ^ for minor releases (e.g. 1.0.0 -> 1.1.0)
```
"@undkonsorten/slider": "^1.0.0"
```
Use * for major releases (e.g. 1.0.0 -> 2.0.0). This will accept all updates.
```
"@undkonsorten/slider": "*"
```

Usage

To use the package, you must import it inside the src/assets/js/app.js.

import '@undkonsorten/slider';

Once the package is imported, you can use the following functions for every single element.

Note that we use the namespace Undkonsorten.

Parameters

For some slider functions you can provide additional parameters which will be directly passed to slick. You can find all the available parameters inside the official documentation.

Slider with a single item

Generates a new slick slider for the given element which shows exactly one slide per frame.

$('.single-item').Undkonsorten.SliderSingle();

You can provide optional parameters when instanciating this function.

$('.single-item').Undkonsorten.SliderSingle({
    autoplay: true,
    dots: true
});

Slider with multiple items

Generates a new slick slider for the given element which shows multiple items on each frame.

$('.multiple-items').Undkonsorten.SliderMultiple({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
});

Slider with settings defined through data attribute

Generates a new slick slider for the given element and uses the data attribute of the element as configuration.

You can find all available data attributes on GitHub.

$('[data-slick]').Undkonsorten.SliderDataAttr();

You can provide optional parameters when instanciating the slider.

$('[data-slick]').Undkonsorten.SliderDataAttr({
    autoplay: true,
    dots: true
});

Add slide to an existing slider

Appends a new slide to the existing slick slider of the given element.

$('.single-item').Undkonsorten.SliderAdd('<div>This is a new slide.</div>');

Remove slide from an existing slider

Removes a slide from the existing slick slider of the given element at the given position. That is, the index of each slide, starting at 0. If no index is defined, the first slide will be removed.

$('.single-item').Undkonsorten.SliderRemove(4); // Removes the fifth slide
$('.single-item').Undkonsorten.SliderRemove(); // Removes the first slide

Destroy existing slider

Removes the existing slick slider functionality from the given element. This does not remove the elements from the DOM but removes only the slick functionality and keeps the elements and their children as defined before instantiating the slick slider.

$('.single-item').Undkonsorten.SliderDestroy();

Publish the package

If you want to push the package to npm, you need to set a higher version number first.

Update version number

You can either change the version number using npm or update it manually.

npm

Note: Before using the following commands, your Git working directory needs to be clean.

You can use one of the following to change the version number:

npm version patch // 1.0.0 -> 1.0.1
npm version minor // 1.0.0 -> 1.1.0
npm version major // 1.0.0 -> 2.0.0

Please consider using a commit message when publishing a new version (%s will be replaced with the new version number):

npm version patch -m "Fixed some issues in %s"

When using npm version, a new Git commit containing the new version number as commit message will be added to your Git repository.

Manually

Alternatively, you can update the version number by your own. For this, just set a higher version number in the package.json.

"version": "1.0.1"

Note: You should avoid updating the version number manually. Here are some reasons for that:

No npm commit message for the update will be provided.
No commit for your Git repository will be added (you have to do it by your own).
Using npm version is less error-prone than doing it manually.

Publish

Once you have changed the version number, you can publish the new version on the npm registry.

npm publish

Note: When publishing the first time, it is necessary to use npm publish --access=public. Since we use a scope @undkonsorten, which is private by default, and our npm account is not ready to publish private packages, we have to make them public accessible.