How to completely destroy an instance of sudoslider?

[adammunoz]

After $(some_element).SudoSlider() it seems to be impossible to completely destroy that instance, even by calling destroy method, sudoSlider will remember the slides that were present, the controls etc...

What I want is to be able to start a new clean instance on the same jquery element. Destroy - Init workflow doesnt fit my use case at all as the new slider will completely have different contents.

Thank you for your help

[webbiesdk]

Is it something like this: http://webbies.dk/tmp/slider3/demos/tmp%20methods.html You are looking for?

[adammunoz]

Hi,

Thanks for the quick reply. I looked at the example. No, not really that is not what I want. The example that you sent is just replacing each image in the slide by a new image manually, but the slider instance is the same.

What I'd like to do is to create a new slider completely. Different number of slides, different contents, etc ...

When I call sudoSlider on a div on which sudoSlider had been previously called my new slides are appended to the old ones. Even if I had removed the li elements from the dom before. It is like sudoSlider is storing those elements somewhere, and stubbornly injects them whenever I try to create a new slider on the same div :)

On 28 April 2013 18:43, webbiesdk notifications@github.com wrote:

Is it something like this: http://webbies.dk/tmp/slider3/demos/tmp%20methods.html You are looking for?

— Reply to this email directly or view it on GitHubhttps://github.com/webbiesdk/SudoSlider/issues/2#issuecomment-17131353 .

[adammunoz]

Hi,

Apologies, the bug was in my code, due to some uncleaned events that was making the callback where I create sudoSldier being called twice. I should have looked into that better before asking. Since in your code you use jquery append, the end result is that the contents of the slider was being appended twice.

I will close this issue.

Thanks for your help, Adam

[codener]

Dear Erik,

I'm looking for the same thing that @adammunoz was looking for. Unfortunately, the link you posted is dead. Would you be so kind to update the link with a working example?

Cheers, Dominik

[webbiesdk]

I dont remember exactly what i implemented. But what do you need that the destroy() method doesn't do?

(Example of destroy method here: http://webbies.dk/assets/files/SudoSlider/package/demos/methods%20destroy%20and%20init.html)

[codener]

I am using the (really great, btw) SudoSlider in a lightbox (MagnificPopup) on a collection of images in the page. When the lightbox is closed, the user can press a button that will load more images. Clicking on one of them opens the lightbox where the slider now contains all images.

I tried to destroy() the slider when more images are loaded, and re-init() it when the lightbox is opened. However, the slider did not recognize the new images. It think it was because it still had the class is-initialized.

I had to manually remove the .slidesContainer of the slider after destroy, so it would reinitialize correctly. Maybe that would be a one-for-all solution?

Thanks for your quick response!

[webbiesdk]

I think you are adding the images the wrong place. Let me explain.

If you have HTML like this:

<div id="slider">
    <div>[content]</div>
    <div>[content]</div>
    <div>[content]</div>
</div>

When initializing (and also after calling the destroy method), SudoSlider will leave it like this:

<div id="slider">
    <div class="slidesContainer">
        <div>[content]</div>
        <div>[content]</div>
        <div>[content]</div>
    </div>    
</div>

The slider slidesContainer class is used as a "marker" that this div contains all the slides. And it is also used to position things correctly.

So if you need to add images after the slider is initialized, you have to add them under the div with .slidesContainer.

If you want the same structure at all times, you can just place your slides under a .slidesContainer from the beginning.

[codener]

Thank you for your hints. However, I could not get it working. My HTML looks like this (HAML syntax for brevity:

.slider
  .slider--slides / <-- sudoSlider is initialized on this div
    / content ...

When I insert a .slidesContainer between .slider and .slider--slides, sudoSlider doesn't see it (naturally) and behaves as before. When I insert the .slidesContainer below .slider--slides, sudoSlider believes I have a single slide in a div called .slidesContainer, takes that slide and wraps it into another .slidesContainer.

For my case, the remaining .slidesContainer is still the culprit. I understand it is used as a marker. But it does not play nicely when images are added. These new images are added by some stupid AJAX to a container in the page, from where the lightbox reaps the images and puts them into the slider. I cannot (don't want to) distinguish cases where the lightbox needs to put images inside .slider--slides vs. .slider--slides .slidesContainer, I just need to use it the same all the time.

I hope I could describe my scenario in an understandable way :). Thanks for listening.