<div class="surveyjs-wrapper surveyjs-custom-inputs panel-body" data-surveyjs-wrapper>
    <form action="../json/survey.json" name="surveyjs-form" class="surveyjs-form surveyjs-cards" data-surveyjs-form novalidate>
        <div class="surveyjs-body questionsList stackSlider" data-surveyjs-body></div>
        <div class="surveyjs-footer row">
            <button class="surveyjs-submit-btn btn btn-red d-block mx-auto" type="submit">
                <span class="surveyjs-submit-text">SEND</span>
            </button>
        </div>
    </form>
    <div class="surveyjs-question-wrapper text-right text-white margin-lg" data-formjs-question data-surveyjs-external="1">
        <div class="surveyjs-answers-wrapper form-group">
            <div class="text-left small" data-question></div>
            <div class="radio custom-radio custom-control custom-control-inline" data-answer>
                <input class="custom-control-input" name="surveyjs-answer-external" data-exclude-storage data-field/>
                <label class="custom-control-label">
                    <span data-label></span>
                </label>
            </div>
            <div class="radio custom-radio custom-control custom-control-inline" data-answer>
                <input class="custom-control-input" name="surveyjs-answer-external" data-exclude-storage data-field/>
                <label class="custom-control-label">
                    <span data-label></span>
                </label>
            </div>
            <div class="surveyjs-errors-wrapper small">
                To go on you must select an answer.
            </div>
        </div>
    </div>
</div>

// FULL CODE: /js/demos/demo-stackslider-1.js
const $form = document.querySelector('[data-surveyjs-form]');
const options = {
    url: '../json/survey.json',
    cssClasses: {
        checkbox:       'custom-control-input',
        radio:          'custom-control-input',
        label:          'custom-control-label',
        select:         'custom-select',
        wrapper: {
            checkbox:   'custom-control form-check',
            radio:      'custom-control form-check'
        }
    },
    templates: {
        wrapper: {
            field:      '<div class="surveyjs-field-container surveyjs-{{answerType}}-wrapper custom-{{answerType}} {{wrapperClasses}}">'+
                            '{{fieldTemplate}}'+
                            '{{labelTemplate}}'+
                        '</div>',

            question:   '<div class="st-item" data-title="#{{questionNumber}}">'+
                            '<div data-question-id="{{questionId}}" data-formjs-question class="surveyjs-question-wrapper">'+
                                '<div class="surveyjs-question-text">{{questionText}}</div>'+
                                '<div class="surveyjs-answers-wrapper form-group">'+
                                    '{{answersHTML}}'+
                                '</div>'+
                            '</div>'+
                        '</div>',
            
            related:    '<div class="surveyjs-field-wrapper surveyjs-related-wrapper input-group">'+
                            '<div class="input-group-prepend">'+
                                '<div class="input-group-text custom-control custom-radio surveyjs-radio-wrapper">'+
                                    '{{fieldTemplate}}'+
                                    '{{labelTemplate}}'+
                                '</div>'+
                            '</div>'+
                            '{{relatedFieldHTML}}'+
                        '</div>'
        }
    },
    formOptions: {
        beforeSend: function beforeSend_doc( data ){...}
    }
};

const onValidation = fields => {...};

const onInitSuccess = function( ajaxData ){
    const $surveyForm = this.$form,
          surveyBody = $surveyForm.querySelector('.surveyjs-body'),
          initStatus = ajaxData.status;
    
    if( initStatus === 'success' ){
        $('.stackSlider').stackslider({ piles : false });
    } else {
        const elemToRemove = $surveyForm.querySelector('.surveyjs-footer');
        elemToRemove.parentNode.removeChild(elemToRemove);
        surveyBody.innerHTML = '<div class="surveyjs-message">Loading Error. Please, reload the page.</div>';
    }
};

$form.addEventListener('fjs.field:validation', event => {
    onValidation([event.detail]);
});

$form.addEventListener('fjs.form:validation', event => {
    onValidation(event.detail.fields);
});

$form.addEventListener('fjs.form:submit', event => {
    event.detail
        .then(ajaxData => {...})
        .catch(error => {...})
        .finally(() => {...});
});

$form.addEventListener('sjs:init', event => {
    event.detail
        .then(data => {
            onInitSuccess.call(mySurvey, data);
        })
        .catch(error => {...});
});

const mySurvey = new Survey( $form, options );