Kill bxSlider on button click so it can be reloaded

I am using bxslider to create a somewhat customized thumbnail/slider element. Basically I have a simple grid of thumbnails and the intent is to have the slider open on the specific thumbnail image on click.

The issue I'm coming across is that the slider remains active after closing the slider window and I need it to stop/reset.

Scouring the internet led me to the function destroySlider(), but that is resulting the following error in the console:

Uncaught TypeError: $(...).bxSlider(...).destroySlider is not a function

Any thoughts on how best to do this is appreciated, code below:


JS:

function removeSlider(a, b) {
    $(a).click(function(){
      $(b).removeClass("open-slide");
      $('.bxslider').bxSlider().destroySlider();
    });
  }

$('.open-slider').on('click', function (e) {
  var startingImg = $(this).data('starting-img');
  var slideSection = $(this).data('slide-section');
  e.preventDefault();
  $('#' + slideSection).addClass('open-slide');
  $('.bxslider').bxSlider({
    startSlide: parseInt(startingImg)
  });
  removeSlider('.remove-port-item', '.slide-contain')
})

HTML:

<div class="row padding-md-bot">
    <div class="col-sm-4">
        <a href="" class="open-slider" data-slide-section="careers-slides" data-starting-img="0"><img src="media"></a>
    </div>
    <div class="col-sm-4">
        <a href="" class="open-slider" data-slide-section="careers-slides" data-starting-img="1"><img src="media"></a>
    </div>
    <div class="col-sm-4">
        <a href="" class="open-slider" data-slide-section="careers-slides" data-starting-img="2"><img src="media"></a>
    </div>
</div>                  
<div class="row">
    <div class="col-sm-4">
         <a href="" class="open-slider" data-slide-section="careers-slides" data-starting-img="3"><img src="media"></a>
    </div>
    <div class="col-sm-4">
         <a href="" class="open-slider" data-slide-section="careers-slides" data-starting-img="4"><img src="media"></a>
    </div>
    <div class="col-sm-4">
         <a href="" class="open-slider" data-slide-section="careers-slides" data-starting-img="5"><img src="media"></a>
    </div>
</div>
<!-- slides -->
<section class="slide-container slide-contain clearfix" id="careers-slides">
    <div class="item-control">
        <button class="remove-port-item button-close-slide">X</button>
      <ul class="bxslider">
        <li>
          <img src="media" alt="">
        </li>
        <li>
          <img src="media" alt="">
        </li>
        <li>
          <img src="media" alt="">
        </li>
        <li>
          <img src="media" alt="">
        </li>
        <li>
          <img src="media" alt="">
        </li>
        <li>
          <img src="media" alt="">
        </li>
      </ul>
    </div>
</section>

2 answers

  • answered 2018-01-11 21:11 tganyan

    Referring to comment by @Chris G above ^:

    Try storing the slider in a global variable when you create it: mySlider = $('.bxslider').bxSlider({ .... Then call myslider.destroySlider(); Edit: according to the docs on github, this will do it.

    I tried this earlier with no luck, but I figured out why and here is the correct code:

    var slider = $('.bxslider').bxSlider();
    
    function removeSlider(a, b) {
        $(a).click(function(){
          $(b).removeClass("open-slide");
          slider.destroySlider();
        });
      }
    
    $('.open-slider').on('click', function (e) {
      var startingImg = $(this).data('starting-img');
      var slideSection = $(this).data('slide-section');
      e.preventDefault();
      $('#' + slideSection).addClass('open-slide');
      slider.reloadSlider({
        startSlide: parseInt(startingImg)
      })
      removeSlider('.remove-port-item', '.slide-contain')
    })
    

    As Chris G points out, the ultimate solution is to move bxSlider to a global variable, but there was an extra step due to the fact that the click function for opening the slider is using a variable scoped to that function (startingImg). This was solved by running:

    slider.reloadSlider({
       startSlide: parseInt(startingImg)
    })
    

    UPDATE: This works if only using one set of slides in the markup. The minute I try to use multiple sets of slides, even though they have their own unique IDs, it breaks reloadSlider and destroySlider. I am still trying to work through this.

  • answered 2018-01-11 21:28 Chris G

    In order for the image clicks and X button to work regardless of the state, it needs to be checked, both when opening and closing the slider:

    Demo:

    var slider = {};
    
    function removeSlider(a, b) {
      $(a).click(function() {
        $(b).removeClass("open-slide");
        var slideSection = $(a).parent().parent().attr("id");
        if (slider[slideSection]) {
          slider[slideSection].destroySlider();
          slider[slideSection] = null;
        }
      });
    }
    
    $('.open-slider').on('click', function(e) {
      var startingImg = parseInt($(this).data('starting-img'));
      var slideSection = $(this).data('slide-section');
      e.preventDefault();
      $('#' + slideSection).addClass('open-slide');
      if (slider[slideSection]) slider[slideSection].goToSlide(startingImg);
      else slider[slideSection] = $('.bxslider').bxSlider({
        startSlide: startingImg
      });
    })
    
    $(document).ready(function() {
      removeSlider('.remove-port-item', '.slide-contain');
    });
    .open-slider img {
      width: 100%;
      height: 20px;
    }
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
    <div class="row padding-md-bot">
      <div class="col-sm-4">
        <a href="" class="open-slider" data-slide-section="careers-slides" data-starting-img="0"><img src="media"></a>
      </div>
      <div class="col-sm-4">
        <a href="" class="open-slider" data-slide-section="careers-slides" data-starting-img="1"><img src="media"></a>
      </div>
      <div class="col-sm-4">
        <a href="" class="open-slider" data-slide-section="careers-slides" data-starting-img="2"><img src="media"></a>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <a href="" class="open-slider" data-slide-section="careers-slides" data-starting-img="3"><img src="media"></a>
      </div>
      <div class="col-sm-4">
        <a href="" class="open-slider" data-slide-section="careers-slides" data-starting-img="4"><img src="media"></a>
      </div>
      <div class="col-sm-4">
        <a href="" class="open-slider" data-slide-section="careers-slides" data-starting-img="5"><img src="media"></a>
      </div>
    </div>
    <!-- slides -->
    <section class="slide-container slide-contain clearfix" id="careers-slides">
      <div class="item-control">
        <button class="remove-port-item button-close-slide">X</button>
        <ul class="bxslider">
          <li>
            <img src="media" alt="">
          </li>
          <li>
            <img src="media" alt="">
          </li>
          <li>
            <img src="media" alt="">
          </li>
          <li>
            <img src="media" alt="">
          </li>
          <li>
            <img src="media" alt="">
          </li>
          <li>
            <img src="media" alt="">
          </li>
        </ul>
      </div>
    </section>

    Edit: changed JS code to work for multiple groups of thumbs + slider.