Using Tiny slider in custom Element

[Shahbaz91]

I am using third party blog plugin which free at store , but Its not a slider and I am using single elements with three column but I want to use it as slider so How can I use tiny slider for that element ? any code samples please,

P.S need to use shopware standard code method, like shopware js plugin

[rwsragh]

Did you find any solution for this? I am also looking for the same?

[Shahbaz91]

yeah that was easy ,

you need to create a js plugin which extends basesliderplugin like this

import BaseSliderPlugin from ‚src/plugin/slider/base-slider.plugin‘;
import deepmerge from „deepmerge“;
import {tns} from ‚tiny-slider/src/tiny-slider.module‘;

then you can initiize plugin like this

if (customCatContainer.length > 0) {
var slider = tns({
container: ‚.product-detail-configurator-group .product-detail-configurator-options‘,
items: 4,
slideBy: ‚page‘,
loop: false,
„arrowKeys“: true,
„controlsText“: [„<“, „>“],
„responsive“: {
„768“: {
„items“: 3,
},
„1024“: {
„items“: 4,
},
}
});
}

and in last simply add this plugin within your main file