【问题标题】：Reinitialize bxSlider from a new slide after page reload页面重新加载后从新幻灯片重新初始化 bxSlider
【发布时间】：2015-08-27 07:20:00
【问题描述】：

大家好，

我在 bxSlider 中展示 Magento 产品。当用户单击任何幻灯片时，即来自 bxSlider 的 Magento 产品，用户将重定向到该产品页面。

基本上，页面重新加载后，我想从当前单击的幻灯片开始 bxSlider 幻灯片放映。（滑块应指向当前选定的幻灯片）

我试过以下代码。但它不能正常工作。有时，如果我将 'startSlide' 值指定为 emq_slide_index，bxSlider 的下一个和上一个按钮没有响应！！！

谁能帮我？您的帮助将不胜感激。

<script type='text/javascript'>
    $t = jQuery.noConflict();
    var emq_slide_index;
    $t(document).ready(function() 
    {
        var slider = $t('.bxslider').bxSlider({
                /* startSlide: " value to start from slide "*/
                slideWidth: 200,
                slideMargin: 12,
                minSlides: 1,
                maxSlides: 2

            });     
            //slider.goToSlide(emq_slide_index);
        $t('.prod_slide').on('click',function(e)
        {
            emq_slide_index = ($t(this).index());
            slider.reloadSlider({
                slideWidth: 200,
                slideMargin: 12,
                minSlides: 1,
                maxSlides: 2,
            });
            //console.log(emq_slide_index);
            //slider.goToSlide(emq_slide_index);
        });
    });
</script>

【问题讨论】：

标签： jquery magento-1.9 bxslider

【解决方案1】：

像这样使用.getCurrentSlide() 和.destroySlider() 选项：

    $(document).ready(function() {
      var slider = $('.bxslider').bxSlider({
        slideWidth: 666,
        slideMargin: 12,
        minSlides: 1,
        maxSlides: 2,
        moveSlides: 1
      });

      $('.prod_slide').on('click', function(event) {
        event.preventDefault();
        var emq_slide_index = slider.getCurrentSlide();
        slider.destroySlider({});
        slider.reloadSlider({
          slideWidth: 333,
          slideMargin: 12,
          minSlides: 1,
          maxSlides: 2,
          moveSlides: 1,
          startSlide: emq_slide_index
        });
      });
    });

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>bxReload</title>
  <link href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet">
</head>

<body>
  <ul class="bxslider">
    <li>
      <img src="http://placehold.it/666x375/000/fff.png&text=FIRST" />
    </li>
    <li>
      <img src="http://placehold.it/666x375/cab/00c.png&text=SECOND" />
    </li>
    <li>
      <img src="http://placehold.it/666x375/666/f4f.png&text=THIRD" />
    </li>
    <li>
      <img src="http://placehold.it/666x375/9a7/941.png&text=FOURTH" />
    </li>
    <li>
      <img src="http://placehold.it/666x375/fff/000.png&text=LAST" />
    </li>
  </ul>
  <button><a class="prod_slide" href="#">Reload</a>
  </button>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.js"></script>

</body>

</html>

我把reload的大小缩小了一半，所以很明显它不是原来的bxSlider，你可以做相应的调整。我发现为了重新加载 bxSlider，你会得到更好的结果，破坏它然后重新加载。在重新加载期间，startSlide 的选项应该具有原始 bxSlider 销毁之前存储在 var = emq_slide_index 中的值。

1.html

此更新使用 URL 哈希来定位下一页的 startSlide。 bxSlider 是个冷酷的情妇，一不小心她就会莫名其妙地冻僵。由于有maxSlides: 2，请始终使用偶数张幻灯片。到最后一张幻灯片时有些奇怪，因此我将加载限制设置为 0 到 5，但您仍然可以手动循环从 0 到 5 到 0。

这有帮助：Query String to Control BXSlider startSlide

第 1 页

    $(document).ready(function () {
      var opts = {
        slideWidth: 666,
        slideMargin: 12,
        minSlides: 1,
        maxSlides: 2,
        moveSlides: 1
      }
      var bx = $(".bxslider").bxSlider(opts);
      document.getElementById('send').addEventListener('click',
        function (event) {
          event.preventDefault();
          var maxSlides = parseInt(bx.getSlideCount(), 10);
          var id = parseInt(bx.getCurrentSlide(), 10) + 1;
          if(id > maxSlides.length - 1) {
            id = maxSlides.length - 1;
          }
          else if(id < 0) {
            id = 0;
          }
          else {
            id = id;
          }
          window.location = '2.html#' + id;
        }, false);
    });

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>bxReload Page 1</title>
  <link href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css"
  rel="stylesheet"> </head>

<body>
  <ul class="bxslider">
    <li> <img id="0" src="http://placehold.it/666x375/000/fff.png&text=FIRST"
      height="375" width="666" /> </li>
    <li> <img id="1" src="http://placehold.it/666x375/cab/00c.png&text=SECOND"
      height="375" width="666" /> </li>
    <li> <img id="2" src="http://placehold.it/666x375/666/f4f.png&text=THIRD"
      height="375" width="666" /> </li>
    <li> <img id="3" src="http://placehold.it/666x375/9a7/941.png&text=FOURTH"
      height="375" width="666" /> </li>
    <li> <img id="4" src="http://placehold.it/666x375/0a0/f91.png&text=FIFTH"
      height="375" width="666" /> </li>
    <li> <img id="5" src="http://placehold.it/666x375/fff/000.png&text=LAST"
      height="375" width="666" /> </li>
  </ul>
  <input type="hidden" id="idx" /> <a id="send" href="#">Next</a>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.js"></script>
  </body>

</html>

第 2 页

    $(function () {
      var search = window.location.search.substr(1),
        params = $.map(search.split('&'), function (item) {
          var matches = item.split('=');
          return {
            name: matches[0],
            value: matches[2]
          };
        }),
        id = parseInt($.grep(params, function (param) {
          return param.name === 'id';
        }).value, 10);
      var opts = {
        slideWidth: 666,
        slideMargin: 12,
        minSlides: 1,
        maxSlides: 2,
        moveSlides: 1
      }
      var bx = $('.bxslider').bxSlider(opts);
      bx.goToSlide(id);
    });

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>bxReload Page 2</title>
  <link href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css"
  rel="stylesheet"> </head>

<body>
  <ul class="bxslider">
    <li> <img id="0" src="http://placehold.it/666x375/000/fff.png&text=FIRST"
      height="375" width="666" /> </li>
    <li> <img id="1" src="http://placehold.it/666x375/cab/00c.png&text=SECOND"
      height="375" width="666" /> </li>
    <li> <img id="2" src="http://placehold.it/666x375/666/f4f.png&text=THIRD"
      height="375" width="666" /> </li>
    <li> <img id="3" src="http://placehold.it/666x375/9a7/941.png&text=FOURTH"
      height="375" width="666" /> </li>
    <li> <img id="4" src="http://placehold.it/666x375/0a0/f91.png&text=FIFTH"
      height="375" width="666" /> </li>
    <li> <img id="5" src="http://placehold.it/666x375/fff/000.png&text=LAST"
      height="375" width="666" /> </li>
  </ul>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.js"></script>
  
  </body>
  
  </html>

【讨论】：

你好@zerOOne .. 谢谢你的回答。但是您提到了“event.preventDefault();”。这会阻止页面重新加载。**我的页面应重定向到新页面，然后滑块应指向所选图像。**
尝试将 url 放在 href 中并删除 event.preventDefault();。您可能必须使用 Ajax，我不熟悉千篇一律的网站。
抱歉，我不能为此使用 ajax。应该加载新页面。所以这里的主要问题是在页面加载后指向选定的幻灯片。
将 emq_slide_index 带入 hash 中，然后应用到新 bxslider 的 startSlide。由于它是一个新页面，只需正常制作 bxSlider，无需重新加载。
需要什么？因为我刚更新完。它获取第一页的当前索引号，然后将其应用于下一页的 bxSlider 的 startSlide。如果这不是您需要的功能，那是什么？