Question

我正在使用bxslider创建一个有点自定义的缩略图/滑块元素。基本上我有一个简单的缩略图网格，目的是在点击时让滑块在特定的缩略图上打开。

我遇到的问题是关闭滑块窗口后滑块保持活动状态，我需要它来停止/重置。

搜索互联网使我进入函数destroySlider()，但这导致控制台出现以下错误：

未捕获的TypeError：$（...）。bxSlider（...）。destroySlider不是功能

对于如何做到这一点的任何想法表示赞赏，代码如下：

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>

Answer 1

参考@Chris G上面的评论^：

尝试在创建滑块时将滑块存储在全局变量中： mySlider = $（'。bxslider'）。bxSlider（{....然后调用 myslider.destroySlider（）;编辑：根据github上的文档，这个会做的。

我之前尝试过这个没有运气，但我想出了原因，这里是正确的代码：

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')
})

正如Chris G所指出的，最终的解决方案是将bxSlider移动到一个全局变量，但是由于打开滑块的click函数使用了一个作用于该函数的变量这一事实，因此还有一个额外的步骤（startingImg）。这是通过运行来解决的：

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

更新：如果仅在标记中使用一组幻灯片，则此方法有效。在我尝试使用多组幻灯片的那一刻，即使它们有自己唯一的ID，它也会破坏reloadSlider和destroySlider。我仍在尝试解决这个问题。

Answer 2

为了使图像点击和X按钮无论状态如何都能工作，在打开和关闭滑块时都需要进行检查：

演示：

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>

编辑：更改了JS代码以适用于多组拇指+滑块。

按下按钮点击bxSlider，以便重新加载

2 个答案: