# Using Tiny slider in custom Element

**URL:** <https://forum.shopware.com/t/using-tiny-slider-in-custom-element/99748>\
**Category:** Shopware 6 (English)\
**Created:** [19. Mai 2023 um 20:27 UTC](https://forum.shopware.com/t/using-tiny-slider-in-custom-element/99748 "2023-05-19T20:27:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shahbaz91](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@Shahbaz91](https://forum.shopware.com/u/Shahbaz91)\
**Post date:** [19. Mai 2023 um 20:27 UTC](https://forum.shopware.com/t/using-tiny-slider-in-custom-element/99748/1 "2023-05-19T20:27:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rwsragh](https://avatars.discourse-cdn.com/v4/letter/r/8dc957/32.png) [@rwsragh](https://forum.shopware.com/u/rwsragh)\
**Post date:** [4. März 2024 um 01:08 UTC](https://forum.shopware.com/t/using-tiny-slider-in-custom-element/99748/2 "2024-03-04T01:08:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Shahbaz91](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@Shahbaz91](https://forum.shopware.com/u/Shahbaz91)\
**Post date:** [4. März 2024 um 04:12 UTC](https://forum.shopware.com/t/using-tiny-slider-in-custom-element/99748/3 "2024-03-04T04:12:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/2/9/29c7587ba660f00e4995d1743162782e5d6d8653.svg) [@system](https://forum.shopware.com/u/system)\
**Post date:** [3. April 2024 um 04:13 UTC](https://forum.shopware.com/t/using-tiny-slider-in-custom-element/99748/4 "2024-04-03T04:13:32Z")

</div>

Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.