turn off anythingslider navigation

[bmwboarder]

Hi, I'd like to disable the anythingslider navigation controls until the user does some event (that I'll control with javascript). I can't seem to find a way that disables the switching of slides. I don't want to completely disable the whole slider as in this: https://github.com/CSS-Tricks/AnythingSlider/issues/85

But I don't want the user to be able to change pages. Well at least until they finish certain tasks. So I would need a way to toggle on and off the controls.
I've got this going, but haven't had any success:

onInitialized: function(e, slider) {                    
    if(slider.currentPage==1){
        //disable controls until user clicks checkbox
        //slider.slideControls();
        //.slider.enableNavigation(false); 
    }

Any ideas? Thanks!

[Mottie]

Hi @bmwboarder!

Try this (demo):

Make sure to set the input's tabIndex="-1" to prevent tabbing through the checkboxes:

<li>
    <div>
        <input type="checkbox" tabindex="-1"/>
        1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
           enim ligula, auctor sed dictum a, elementum nec nunc.
    </div>
</li>

and use this code to toggle the navigation arrows:

$('#slider')
    .anythingSlider({
        infiniteSlides: false,
        stopAtEnd: true,
        enableKeyboard: false,
        buildNavigation: false,
        buildStartStop: false,
        buildArrows: true,
        onInitialized: function (e, slider) {
            slider.$forward.add(slider.$back).hide();
        },
        onSlideBegin: function(e, slider){
            var dir = slider.targetPage > slider.currentPage,
                $prev = dir ? slider.$currentPage : slider.$currentPage.prev(),
                $next = dir ? slider.$currentPage.next() : slider.$targetPage,
                backBtn = slider.targetPage !== 1 && $prev.find('input:checkbox').is(':checked'),
                fwdBtn = slider.targetPage !== slider.pages && $next.find('input:checkbox').is(':checked')
            slider.$back.toggle( backBtn );
            slider.$forward.toggle( fwdBtn );
        }
    })
    .on('change', 'input:checkbox', function(){
        var slider = $('#slider').data('AnythingSlider'),
            checked = $(this).is(':checked');
        slider.$forward.toggle( slider.currentPage < slider.pages && checked );
        slider.$back.toggle( slider.currentPage > 1 );
        // show the submit button in the last page.
        $('.submit').toggle( slider.currentPage === slider.pages && checked );
    });

[bmwboarder]

Thanks Mottie! That is getting me there. I got the arrows hidden at the beginning now which is good, but I haven't gotten the on change to work quite yet. This is what I have at the moment (reduced down just for quicker testing. The alert does work, so the event is firing at least):

$("#page1_checkbox").on("click", function(){
    //alert("test");
    var slider = $('#slider').data('anythingSlider'),
        checked = $("#page1_checkbox").is(':checked');
    //slider.$forward.toggle( slider.currentPage < slider.pages && checked );
    //slider.$back.toggle( slider.currentPage > 1 );
    // show the submit button in the last page.
    //$('.submit').toggle( slider.currentPage === slider.pages && checked );
    slider.$forward.toggle();
});

Also, is there a way to turn off all the navigation? I wouldn't mind having the keyboard commands, and I had actually added the swiping too. But this is definitely helping me understand the flow better. Thank you very much for the help!

[Mottie]

The code I shared above should cover all checkboxes within the slider. So, I'm not sure why it was rewritten in the code above to check for a click instead of a change?

Which part of the navigation did you want to turn off? In the code above, I included the enableKeyboard, buildNavigation, buildStartStop and buildArrows options, all of which turn on/off parts of the navigation.

[bmwboarder]

Hey Mottie,

The code to toggle the arrow back on wasn't working right initially, so I was just fiddling with stuff to try and get something to work. I only have one checkbox for now, so I just limited the scope, I may switch back later to code more resembling yours as I add more content.

If I have the "enableKeyboard" turned on, is there a good way to turn them off at the same time as toggling the arrow off? It would be great to have the keyboard controls, but they would have to be turned off for the checkbox to really be limiting the user. Thanks for the help with this.

[Mottie]

It might be better to add your own custom code for controlling the slider than to try and hack the built-in keyboard controls. It's not really that much more code (updated demo):

$(document).on('keyup', function(e){
    // ignore everything except left and right arrows
    if (e.which !== 37 && e.which !== 39) { return; }
    // find active slider
    var slider, t, active = $('.activeSlider').find('.anythingBase');
    if (active.length) {
        slider = active.data('AnythingSlider');
        if (e.which === 37 && slider.$back.is(':visible')) {
            slider.goBack();
        }
        if (e.which === 39 && slider.$forward.is(':visible')) {
            slider.goForward();
        }
    }
});

[bmwboarder]

Whew, you know your stuff! Thank you for your time, that is a great demo.

[Rafaelini]

And a verey interesting aplication of the slider!