"bxslider jquery" 改变指定宽度的幻灯片模式

Question

就像我在我的网站上使用 bxslider 的标题一样，实际上我现在正在使用垂直缩略图幻灯片，但问题是，它在移动宽度时看起来很难看，所以我想像普通滑块一样更改它箭。你能帮我怎么做吗？这是我想要的东西： 1.正常使用垂直拇指滑动 2.当宽度触发指定宽度时，缩略图隐藏（可能在css处显示none） 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() returns bxSlider 最初是这样的，所以如果你想在重新加载后更改 bxSlider，请不要使用它，而是使用 reloadSlider()。除了显而易见的（重新加载 bxSlider）之外，您还可以加载一组不同的选项。 注意： 有 2 个对象字面量：

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

它们每个都有 key/value 对（或属性）来自 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)

这是演示的核心。出于演示目的，我将该功能绑定到一个方便的按钮。测试演示时，您应该通过单击 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>

"bxslider jquery" 改变指定宽度的幻灯片模式

"bxslider jquery" change the slide mode at specified width

javascript

jquery

css

slider

bxslider

bx.reloadSlider() 方法

onSliderResize 回调

reloadBX(currentIndex)

演示