"bxslider jquery" 改变指定宽度的滑动模式答案

【问题标题】："bxslider jquery" change the slide mode at specified width"bxslider jquery" 改变指定宽度的滑动模式
【发布时间】：2018-02-22 10:46:43
【问题描述】：

就像我在我的网站上使用 bxslider 的标题一样，实际上我现在正在使用垂直缩略图幻灯片，但问题是，它在移动宽度时看起来很丑，所以我想像普通的带箭头的滑块一样更改它。你能帮我怎么做吗？这是我想要的东西： 1. 正常使用垂直拇指滑动 2.当指定宽度触发宽度时，拇指隐藏（css可能不显示） 3.做destroyslider停止垂直拇指滑块并将其更改为带有箭头的普通滑块 4.当宽度再次正常时，会再次切换到垂直拇指滑块

好的，这是我的 jquery：

var mainImage;
$(window).load(function() {
    mainImage = $('.product-gallery').bxSlider({
        infiniteLoop: false,
        hideControlOnEnd: true,
        pager: false,
        controls: false,
        auto: false,
        minSlides: 1,
        maxSlides: 1,
        moveSlides: 1,
        mode: 'fade',
        adaptiveHeight: true
    });

    $('.product-gallery-thumbs ul').bxSlider({
        infiniteLoop: false,
        hideControlOnEnd: true,
        pager: false,
        auto: false,
        minSlides: 4,
        maxSlides: 4,
        moveSlides: 1,
        slideWidth: '100%',
        mode: "#{options['product_thumbnail_direction']}",
        slideMargin: 10,
        onSliderLoad: function(currentIndex) {
            $('.product-gallery-thumbs ul li').eq(0).addClass('active')
        }
    });

    $('.product-gallery-thumbs ul li').each(function() {
        $(this).click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            mainImage.goToSlide($(this).index());
        });
    });
});

什么时候销毁：

mainImage.destroySlider();

这里是带箭头的普通滑块：

mainImage.bxSlider({
    mode: 'fade',
    captions: true,
    slideWidth: 600
  });

更新： 我尝试这样做，什么时候破坏是有效的，但是当切换到普通箭头滑块时它不起作用。希望大家帮我解决这个问题

$(document).ready(function(){
            setMaxWidth(767px);
            mainImage.destroySlider();

            function setMaxWidth(767px) {
              mainImage.bxSlider({
                mode: 'fade',
                captions: true,
                slideWidth: 600
              });
            })

【问题讨论】：

请帮帮我

标签： javascript jquery css slider bxslider

【解决方案1】：

bx.reloadSlider() 方法

destroySlider() 方法返回最初的 bxSlider，因此如果您想在重新加载后更改 bxSlider，请不要使用它，而是使用 reloadSlider()。除了显而易见的（重新加载 bxSlider）之外，您还可以加载一组不同的选项。 注意： 有 2 个对象字面量：

var cfgA = {...} 和 var cfgB = {...}

它们每个都有来自bxSlider API 的键/值对（或属性）。调用.bxSlider()时，只需加载其中一项配置：

var bx = $('.bx').bxSlider(cfgA);

onSliderResize 回调

就滑块插件而言，bxSlider 并不是最稳定的，随着浏览器的更新和 bxSlider 在 v.4.2.12 的停滞，它可能会出现错误，但 bxSlider 擅长的一件事是回调。我编写了由 bxSlider 回调控制的复杂程序，因为它们可靠且永不中断。在这个演示中onSliderResize 调用函数reloadBX(currentIndex)。 **注意：**reloadBX() 上没有括号：

onSliderResize: reloadBX

reloadBX(currentIndex)

这是演示的核心。出于演示目的，我将该功能绑定到一个方便的按钮。在测试 Demo 时，您应该通过单击 RELOAD 按钮或调整 bxSlider 的大小来预期以下内容：

在cfgA 和cfgB 之间切换
重新定位到重新加载之前 bxSlider 处于打开状态的位置索引。
在重新加载时移动图像以进行调整以避免图像中途卡住。

Demo中评论的细节

演示

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>bxSlider Reload</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <style>
    img {
      margin: auto;
      display: block;
      max-width: 100%;
    }
  </style>
</head>

<body>
  <button class='reload'>RELOAD</button>
  <ul class='bx'>
    <li>
      <img src="https://i.imgur.com/DrEwPH0.jpg">
      <img src="https://i.imgur.com/MEPxbq4.jpg">
    </li>
    <li>
      <img src="https://i.imgur.com/6qGdA1e.gif">
    </li>
    <li>
      <img src='https://i.imgur.com/DsM6J8U.gif'>
    </li>
    <li>
      <img src="https://i.imgur.com/sbxyLKX.png">
    </li>
    <li>
      <img src="https://i.imgur.com/DheohWR.gif">
    </li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

  <script>
    // Cfg flag
    var AB = 'A';

    // Index counter
    var idx = 0;

    // cfgA
    var cfgA = {
      mode: 'horizontal',
      slideWidth: 320,
      adaptiveHeight: true,
      onSliderResize: reloadBX
    };

    // cfgB
    var cfgB = {
      mode: 'fade',
      captions: true,
      slideWidth: 160,
      adaptiveHeight: true,
      onSliderResize: reloadBX
    };

    // Reference bxSlider instance
    var bx = $('.bx').bxSlider(cfgA);

    /*
    Resize Callback 
    */ // Called on resize event
    function reloadBX(current) {

      // Store current index
      idx = current;

      // Determine what configuration bx is in
      if (AB === "A") {

        /* if bx is in cfgA...
        || reload slider with cfgB
        */
        bx.reloadSlider(cfgB);

        // Shift all img to the left
        $('img').css('transform', 'translateX(-25%)');

        // Switch cfg flag to B
        AB = "B";

        // Otherwise...
      } else {

        // Reload slider with cfgA
        bx.reloadSlider(cfgA);

        // Shift all img to the right
        $('img').css('transform', 'translateX(0)');

        // Switch cfg flag to A
        AB = "A";
      }

      // Go back to the index before reload
      bx.goToSlide(idx);
    }

    // Added a reload button for convenient testing 
    $('.reload').click(function(e) {

      // Get the current index and store it
      idx = bx.getCurrentSlide();

      /* Need to use the .call() function so that the context
      || is changed to bxSlider
      */
      reloadBX.call(this, idx);
    });
  </script>
</body>

</html>

【讨论】：