how to destroy unslider completely? #354

Open
badalsurana opened this Issue Mar 9, 2016 · 10 comments

Projects

None yet

9 participants

@badalsurana

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
@Abroadler

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

@aviemet
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
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
});

slider.unslider('destroy');

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
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>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

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

@tschallacka

For those interested:
Apply #439
Then apply #441

@rpataca
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.

@tschallacka

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 Androidhttps://aka.ms/ghei36 downloaden

On Tue, Sep 13, 2016 at 10:53 AM -0700, "Raz Pataca" <notifications@github.commailto:notifications@github.com> 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 GitHubhttps://github.com/idiot/unslider/issues/354#issuecomment-246766051, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AIPP2XN778osb-LwdKcM7feutzLELQWYks5qpuMCgaJpZM4Hs8kB.

@engerb
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')){
        $('.slider').unwrap();
        $('.slider').removeClass('unslider-horizontal');
        $('.unslider-nav').remove();
    }

    // init the slider
    $('.slider').unslider({
        index           : activeSlide, 
        animateHeight   : true, 
        arrows          : false
    });
}


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

    // init Unslider
    slider(0);

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

});
@maxout
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.

@tschallacka

@maxout did you apply #354 (comment) ?

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