How to dynamically add a slide?

[dheerajw]

Issue description: How to dynamically add a slide?

Demo link/slider setting:

Tiny-slider version:
Browser name && version:
OS name && version:

[ganlanyuan]

I know other slider plugins have features of add/remove slides, but it's confusing for me: when/where you gonna use these features? In admin?

[dheerajw]

Yes, you guessed it rightly. We have a requirement to let the end users design and add/edit their slides with the help of a visual editor. It would be a great addition.

[ganlanyuan]

Okay, then how do you want to pass the mark up of the slide? As a string, or HTML Element?

[dheerajw]

We're fine with both the options. Basically, the idea is to have the ability to add, edit and delete any of the slides from the template.

[ganlanyuan]

Actually you can do:

1. slider.destory()
2. add, edit, delete or whatever you want
3. slider.rebuild()

[ThaoD5]

@ganlanyuan, note that in 2.8.5, it seems not possible to

1. slider.destroy()
2. add, edit, delete or whatever you want
3. slider.rebuild()

if the slider has been made with a DOM element passed as container, string returns another issue for me but I cant seem to add new slides after a load more and then rebuild the slider successfully,

Error :
TypeError: Cannot read property 'clientWidth' of null

[ganlanyuan]

@ThaoD5 destroy() was fixed in v2.8.6

[ThaoD5]

Great to hear, I did fallback to a previous version in order to fix the project while this got fixed, I will give it a try :-) Thanks for your reactivity !

[joeyrubio]

I want to be able to remove and add slides on the fly. The user selects an image and it gets added to the carousel. If it selects an image from the slider, it gets removed. Are these sort of dynamic changes possible or something that will be supported in the near future?

[aaronetto]

@ganlanyuan for example, i working in a ecommerce and each product has variations, when i select some combination of variations (like color, size), I will want remove actually images and add new images of the new combination, that is a use case. I would be grateful if tns has these features.

[Strongground]

@joeyrubio & @aaronnunez95: Wasn't this already answered by @ganlanyuan? I might be wrong, but I think this describes how to do it:

Actually you can do:
1. slider.destory()
2. add, edit, delete or whatever you want
3. slider.rebuild()

[aaronetto]

@Strongground exists a delay between destroy, modify the DOM and rebuild the slider.

[ico85]

This doesn't work. After rebuild() every property in the Slider Instance is null. Tiny Slider Version 2.9.2. I really think it's a common use case to add dynamic slides for example via Ajax if there are a lot of slides to load. So native support would be nice.

[filip-jk]

@ganlanyuan Any updates on this? I'm experiencing the same issue as @ico85 :(

[ico85]

@ganlanyuan Any updates on this? I'm experiencing the same issue as @ico85 :(

I managed to add slides dynamically by first destroying the Slider and setting the instance to null. After that Re instantiate with startindex. Be careful with Dom elements here since the destroy method manipulates the Dom and therefore former queried elements are not the same. Can't supply code now because I'm on mobile ;)

[filip-jk]

@ico85 I actually achieved it with an almost identical approach yesterday. You're right about the DOM elements: they're getting modified a lot, especially if you use a thumbnail carousel as well as the navigation for the main gallery and that required some extra work but it's fine.

I only wrote my comment because the approach that the plugin author suggests simply does not work (with the .rebuild()).

Cheers!

[DavidMelnyk]

Can somebody post relevant code to resolve this issue? Would be very much appreciated.

Have a similar problem to users here - need to dynamically add content to the slider through recreating the slider somehow - however I am having issues.

Thanks!

[berndartmueller]

Similar problem. I have a page with let‘s say 10 grid items. Each item has an image slider with on average 7 slides. But currently this causes noticeable performance issues on desktop. Not sure if it‘s caused because of lots of DOM nodes or because it f css painting issue.

Therefore dynamic (virtual) slides would be a great feature.

[berndartmueller]

EDIT: I solved my performance issue with having multiple slider instances on one page. It was caused by having the css property filter: drop-shadow(...) on those prev/next controls (to make arrow svg better visible).

Lesson beeing learned: Use css filter drop-shadow very careful!

[mfcodeworks]

Currently struggling with this and I can't get it to work.

I'm building dynamically by fetching the carousel images in Angular from my backend, then adding the <img> tag after fetching the images.

No matter what I try I get the No slides found in... error and the images are all displayed with no slider effect

[mfcodeworks]

Currently struggling with this and I can't get it to work.

I'm building dynamically by fetching the carousel images in Angular from my backend, then adding the <img> tag after fetching the images.

No matter what I try I get the No slides found in... error and the images are all displayed with no slider effect

Initiating seems to work using the ngAfterViewChecked hook checking if the *ngFor data exists, but not sure if dynamically adding after instantiation works

[DaveOdden]

I am using the tiny-slider 2.8.7 in a react application. I am struggling to find a way to get this destroy > add/remove > rebuild to work as expected. My use-case is that I have a carousel with cards but on desktop, the first slide is a CTA and on mobile, that slide is remove (and a different element appears outside of the carousel). The carousel seems to not accept a change in state that contains the slider items as well as conditional component rendering based on state. The repo owner has indicated this is possible, but are there any real examples of this scenario working?

[care4pet]

I am using the tiny-slider 2.8.7 in a react application. I am struggling to find a way to get this destroy > add/remove > rebuild to work as expected. My use-case is that I have a carousel with cards but on desktop, the first slide is a CTA and on mobile, that slide is remove (and a different element appears outside of the carousel). The carousel seems to not accept a change in state that contains the slider items as well as conditional component rendering based on state. The repo owner has indicated this is possible, but are there any real examples of this scenario working?

He did it two years ago and it was more like suggestion, not solution.
Currently there is no solution.

[Dobby89]

@DaveOdden Did you ever find a solution?

[xanisu]

I've been struggling a bit with this, but I've succeed at the end.

My goal was to have a slider, with some filters (chips)

Here's a working example:

https://codepen.io/xanisu/pen/PobOLdg

I'm using the above commented steps:

1. Destroy
2. Modify / add / remove DOM
3. Rebuild

[fdkitamory]

I've been struggling a bit with this, but I've succeed at the end.

My goal was to have a slider, with some filters (chips)

Here's a working example:

https://codepen.io/xanisu/pen/PobOLdg

I'm using the above commented steps:

1. Destroy
2. Modify / add / remove DOM
3. Rebuild

its works, but the user goes back to the first item.

In my situation - I need to add a special slide, after user action and save the slider position. But I can't.

Tried adding hidden slide, but it breaks slider position.

[awesomerobot]

Yes, ideally a solution would need to append slides while retaining the current position... it's possible the user navigated to slide 2 while slide 4 finished loading, so jumping back to slide 1 is not a good experience.