BXSlider Help, autocontrols: true producing error

Clyde Timbs asked on October 11, 2017 15:39

Slider is working fine except for when I try to turn on autoControls, then it produces the following error:

jquery.bxslider.js:699 Uncaught TypeError: slider.controls.autoEl.on is not a function

This is my initialization info:

$(document).ready(function(){
var j = jQuery.noConflict();
 $('.bxslider').bxSlider({
    mode: 'fade',
    captions: true,
    slideMargin: 10,
    adaptiveHeight: true,
    pager: false,
    auto: true,
    autoHover: true,
    autoControls: true
});
});

I know this isn't Kentico, but hoping someone may be able to assist?

Thanks, Clyde

bxslider gallery

Recent Answers

Rui Wang answered on October 11, 2017 19:33 (last edited on October 11, 2017 19:36)

Do you have the autoControls code added?

Look at this page http://bxslider.com/docs/jquery.bxslider.html the var appendControlsAuto = function(){ ... } slider.controls.autoEl = $('<div class="bx-controls-auto" />');

or from this page https://codepen.io/tobydennison/pen/azZroz

slider.controls.autoEl.on('click', '.bx-start', clickStartBind);
slider.controls.autoEl.on('click', '.bx-stop', clickStopBind);

0 votesVote for this answer Mark as a Correct answer

Clyde Timbs answered on October 11, 2017 20:09

Yes, this is all in place. Everything runs fine as long as I don't try to turn on the autoControls. While this is not a necessity, we would like to get it running eventually.

I did notice on the first page you linked, the lines of code actually read:

slider.controls.autoEl.depends('click', '.bx-start', clickStartBind);
slider.controls.autoEl.depends('click', '.bx-stop', clickStopBind);

Using depends rather than on. I tried making that change and simply got the same error stating slider.controls.autoEl.depends is not a function.

0 votesVote for this answer Mark as a Correct answer

Rui Wang answered on October 11, 2017 20:12 (last edited on October 11, 2017 20:17)

Is the page viewable or if you can paste the JS you have?

0 votesVote for this answer Mark as a Correct answer

Clyde Timbs answered on October 11, 2017 20:17

Rui Wang, I am sorry, but I am not sure how I go about doing that. Can you point me to an example? I am not a programmer, but I am trying to slowly work my way through this.

Thanks, Clyde

0 votesVote for this answer Mark as a Correct answer

Rui Wang answered on October 11, 2017 20:59 (last edited on October 11, 2017 22:21)

Issue resolved, both bxslider.jquery.min.js and bxslider.jquery.js were referenced in the page. the MIN version doesn't have the above function and was loaded first, causing the JS error. So removed the MIN version reference.

Also, older version of jqeury reference (1.6.4) caused conflict.

0 votesVote for this answer Mark as a Correct answer