Question

就像标题我在我的网站上使用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
              });
            })

Answer 1

bx.reloadSlider（）方法

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

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

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

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

onSliderResize Callback

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

onSliderResize: reloadBX

reloadBX（CURRENTINDEX）

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

在cfgA和cfgB
重新定位到位置索引bxSlider在重新加载之前已打开。
移动图像以在重新加载时进行调整，以避免图像被中途卡住。

在演示中评论的详细信息

演示

＆＃13;

<!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>

＆＃13;

“bxslider jquery”以指定的宽度

1 个答案:

bx.reloadSlider（）方法

onSliderResize Callback

reloadBX（CURRENTINDEX）

演示