How can I reload slider when I toggle between slide/fade?

Question

Please note: I can't show a working example, this only functions inside my CMS however I will do my best to explain.

In the CMS, client side, I have a dropdown, the value toggles the slider from slide to fade data.config.dropdown1. This dropdown selection changes the slider in real time however making the change for some reason breaks the sliders appearance.

My question is how can I reload the slider every time someone makes a selection, below is my best shot at it.

$(document).ready(function() {
  var switch = data.config.dropdown1;
  
  $('.bxslider').bxSlider({
    mode: switch,
    auto: true,
    speed: 1000,
    pause: 6000,
    nextText: '<i class="fas fa-chevron-right"></i>',
    prevText: '<i class="fas fa-chevron-left"></i>'
  });
  
  switch.reloadSlider();
});

Again I am sorry I cant provide a working version but it only works in the client editing section of my CMS.

Answer 1

I'm making some assumptions here, since you haven't provided any HTML, but I'd probably just create a simple change handler for the select element and re-initialize bxSlider from that.

Note that switch is a reserved word in JavaScript. Don't use it to name values.

$(document).ready(function() {
  const switchEl = data.config.dropdown1; // select element

  function initSlider() {
    $('.bxslider').bxSlider({
      mode: switchEl.value,
      auto: true,
      speed: 1000,
      pause: 6000,
      nextText: '<i class="fas fa-chevron-right"></i>',
      prevText: '<i class="fas fa-chevron-left"></i>'
    });
  }
  
  initSlider();
  $(switchEl).change(initSlider);
});