how to destroy unslider completely? #354

badalsurana opened this Issue Mar 9, 2016 · 10 comments


None yet

9 participants


How i can completely destroy the unslider and make elements the way they were before?

@swim swim added a commit to swim/unslider that referenced this issue Mar 22, 2016
@swim swim Issue #354: provide destroy method. 95b4e92

can you provide the syntax for calling this destroy method please?

aviemet commented Mar 24, 2016

Unslider wraps the original element in another div, but on destroy doesn't "unwrap". When the same element is destroyed and then started again, it keeps getting nested deeper and deeper in a div with class 'unslider'.

Can the destroy method completely remove all Unslider markup please?

swim commented Mar 29, 2016

Sorry for the late reply, was away over Easter. The syntax for calling this method would follow the same pattern as the others;

var slider = $('.default-slider').unslider({
  // Options


The current implementation should remove the wrapping div RE line 376;

.unwrap('<div class="' + self._ + '" />')

I can't replicate the issue of having nested markup on re-creation of the slider. However we could add some tests if the author is keen.

ediblemanager commented Aug 9, 2016 edited

I've just stumbled over this.

 <form action="" class="form-horizontal" id=
    "bulk_withdraw_all_members_form" name="bulk_withdraw_all_members_form">
        <input id="matched_type" name="alls" type="hidden" value="alls">
        <div class="unslider">
            <div class="unslider">
                <div class="unslider">
                    <div class="unslider">
                        <div class=
                        "withdraw_all_members_container unslider-horizontal"
                        style="position: relative; overflow: hidden;">
                            <ul class="unslider-wrap unslider-carousel" style=
                            "width: 200%; left: 0%;">
                                <li class="first_slide unslider-active" style=
                                "width: 50%;"></li>

Using slider.unslider('destroy'); doesn't seem to remove the wrapper.


For those interested:
Apply #439
Then apply #441

rpataca commented Sep 13, 2016 edited

have those two patches worked for anyone? Not working for me.

The container stays the same. the ul and li loose their classes and styling.
No more binding on my arrows.


If my set of patches doesnt work for you you probaly forgot a step. I use it in an octobercms ajax framework where proper destroying is essential

Outlook voor Android downloaden

On Tue, Sep 13, 2016 at 10:53 AM -0700, "Raz Pataca" <> wrote:

have those two patches worked for anyone? Not working for me.

You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread

engerb commented Oct 11, 2016

I'm using unslider with Jquery - 3.1.1 and had an issue with the auto-height (animateHeight) while changing the window-size.

Destroying and reinitializing was the solution that worked for me and here is an example of how I did that (along with remembering the current slide--only works with a single slide on the page for now)

/* Unslider */
function slider(activeSlide) {

    // destroy if exists first
    if ($('.slider').hasClass('unslider-horizontal')){

    // init the slider
        index           : activeSlide, 
        animateHeight   : true, 
        arrows          : false

/*When page is loaded and ready*/
$(document).ready(function() {

    // init Unslider

    $(window).resize(function() {
        //not suitable for multiple sliders
        var activeSlide = $('ol > .unslider-active').attr('data-slide'); 

maxout commented Dec 12, 2016

When i apply .unslider('destroy') to my slider, the wrapping is removed but the ul is still draggable.
a have to apply .unbind() to my ul-element.


@maxout did you apply #354 (comment) ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment