2

I am using a bxSlider plugin to create a JS web application. On one slide there is a form which needs to be validated before I can get to a next slide. For validation I use jQuery Validate plugin which returns true / false when the form is valid.

How to make bxSlider not to go to next slide when form is not valid? I would prefer to use default bxSlider next/prev controls.

Function that initialize bxSlider: 

bxSliderInit: function() {
    var $slider = $(dom.slider);

    $(dom.body).on('click', dom.pageLink, function(e) {
        e.preventDefault();

        _this = $(this);
        slideFinished = true;
        //newSlide = _this.data('slide-index');

        app.slidePaging();
    });

    slider = $slider.bxSlider({
        mode: 'horizontal',
        easing: 'ease-out',
        infiniteLoop: false,
        touchEnabled: false,
        preventDefaultSwipeY: true,
        preventDefaultSwipeX: true,
        responsive: false,
        slideWidth: 1024,
        pager: false,
        prevText: '<i class="icon icon-arrow-left"></i>',
        nextText: '<i class="icon icon-arrow-right"></i>',

        onSlideBefore: function($slideElement, oldIndex, newIndex) {
            app.slideValidation($slideElement, oldIndex, newIndex);
        }
    });
},

BxSlider callback onSlideBefore to validate the form

slideValidation: function($slideElement, oldIndex, newIndex) {

    var $thisSlidevalidationForm = $(dom.slider).children().eq(oldIndex).find(dom.formValidationClass),
        validationFromExist = $thisSlidevalidationForm.length > 0 ? true : false;

    if (oldIndex < newIndex) {
        if (validationFromExist) {

            if (!$thisSlidevalidationForm.valid()) {
                //slider.dontDoTransition
            }
        }
    }
},

Everything seems to work fine, I just can't force the bxSlider to stay on the current slide when the form is not valid...

Thank u for ur help!

Very Curious
  • 881
  • 3
  • 26
  • 50
  • http://stackoverflow.com/questions/20518566/bx-slider-how-to-continue-auto-sliding-after-clicking-in-default-bx-pager – vignesh.D Sep 24 '15 at 06:05
  • use auto:false until validation – vignesh.D Sep 24 '15 at 06:06
  • auto: false is a default option and auto: true is not required as it is up to user when he want's to slide to another page. I want the slideshow to be stopped (no transition to next slide) when form not valid. – Very Curious Sep 24 '15 at 06:17

1 Answers1

0

After some experiments and ideas, here is the solution:

onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
                    return currentSlideNumber--;
    }
Ed Avitia
  • 1