Перезагрузите bxSlider при изменении размера окна

javascript reload bxslider

2049 просмотра

1 ответ

512 Репутация автора

Я использую bxSlider на моем сайте. Слайдер должен перезагрузиться при изменении размера окна. С кодом, который я на самом деле использую, слайдер загружается при загрузке и изменении размера. Но слайдер не перезагружается, а загружается второй раз. Итак, у меня есть 2 загруженных ползунка. Мне нужно просто перезагрузить слайдер и не загружать его снова.

$(window).on('load resize', function () {
    /* BX SLIDER */
    $('#bannerslider').bxSlider({
        captions: true
    }); 
});
Автор: Peesen87 Источник Размещён: 19.07.2016 08:35

Ответы (1)


1 плюс

28015 Репутация автора

Использовали 2 обратных вызова от API bxSlider :

  • onSliderResize()Когда инициируется событие изменения размера, reloadBX()будет вызываться .reloadSlider, сохранять текущий индекс localStorageи извлекать его для сохранения позиции индекса, а не начинать с начала после перезагрузки.

  • onSliderLoad()Когда событие загрузки запускается, checkBX()проверит высоту bxSlider и, если он свернут (0px), он вызовет redrawSlider(). Это будет принудительно выполнять сброс графически до тех пор, пока bxSlider не проснется.

Этот фрагмент работает быстро, поэтому я настроил консоль, чтобы показать, что она работает. Рассмотрите это в режиме полной страницы, конечно. Если по какой-то причине Сниппет сломан (иногда это происходит), вы можете проверить демо наPlunker

SNIPPET

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>bxSlider Resize</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
  <style>
    img {
      margin: 0 auto;
      display: block;
    }
    /* Ruleset makes img centered. */
  </style>
</head>

<body>
  <ul class='bx'>
    <li>
      <img src="http://placehold.it/640x480/000/fff?text=1">
    </li>
    <li>
      <img src="http://placehold.it/640x480/00f/fc0?text=2">
    </li>
    <li>
      <img src="http://placehold.it/640x480/8de/fa6?text=3">
    </li>
    <li>
      <img src="http://placehold.it/640x480/cb9/0ff?text=4">
    </li>
    <li>
      <img src="http://placehold.it/640x480/fff/000?text=5">
    </li>
  </ul>
  <input id='cache' type='hidden'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <!-- The 3 console.logs facilitates debugging. 
//]  They are optional and are not essential for overall functioning.//-->
  <script>
    var bx = $('.bx').bxSlider({
      captions: true,
      // onResize 
      onSliderResize: reloadBX,
      // onLoad
      onSliderLoad: checkBX
    });

    /*
    Resize Callback 
    */ // Stores the current slide index.
    function reloadBX(idx) {
      localStorage.cache = idx;
      console.log('Reload on Slide: ' + idx);
      // Reloads slider, 
      ///goes back to the slide it was on before resize,
      ///removes the stored index.
      function inner(idx) {
        setTimeout(bx.reloadSlider, 0);
        var current = parseInt(idx, 10);
        console.log('RELOADED');
        bx.goToSlide(current);
        localStorage.removeItem("cache");
      }
    }

    /*
    Load Callback
    */ // If the slider height is collapsed, 
     /////invoke a repaint and stay on current index.
    function checkBX(idx) {
      var vp = $('.bx-viewport').height();
      console.log('View-port Height: ' + vp + 'px');
      while (vp <= 0) {
        bx.redrawSlider();
        console.log('REPAINT');
      }
 
    }
  </script>
</body>

</html>

Автор: zer00ne Размещён: 19.07.2016 01:05
Вопросы из категории :
32x32