Переход к первому слайду, если все существующие слайды перезагружены в BX Slider - PullRequest
Новая
       8

Переход к первому слайду, если все существующие слайды перезагружены в BX Slider

0 голосов
/ 06 июля 2018

Я использую слайдер bx для своего сайта. Я хочу знать, как я могу избежать пустого пространства, если содержимое переходит во время скольжения по следующим слайдам. Возможно ли, что он может отображать или вернуться к первым слайдам. Для справки я прикрепил скриншот ниже enter image description here Как видите, с правой стороны появляется пустое пространство, потому что слайдов больше нет. Как я могу показать первые вторые слайды там, чтобы он продолжал. 

function loadgallery() {
        setTimeout(function () {
            var maxSlides;
            width = $(window).width();

            if (width < 1023) {
                maxSlides = 1;

            } else {
                maxSlides = 4;
            }
            var myslider = $('.bxslider').bxSlider({
                video: true,
                minSlides: 1,
                auto: false,
                maxSlides: maxSlides,
            });
        }, 500);
    }

1 Ответ

0 голосов
/ 10 июля 2018

Существуют некоторые трудноизученные факты о bxSlider, которые не очевидны и / или не задокументированы.

  1. Существуют некоторые критические настройки, применимые к горизонтальной карусели (mode:"horizontal" (по умолчанию)):

    • slideWidth: Number является обязательным
    • Если infiniteLoop: true (по умолчанию), настоятельно рекомендуется, чтобы общее количество слайдов было четным.
    • maxSlides: Number значение должно равномерно делиться на общее количество слайдов.
    • minSlides: Number значение должно совпадать с moveSlides: Number

  2. Если bxSlider запускает несколько слайдов и сохраняет слайды по центру после сбоя изменения размера, используйте shrinkItems: true. После загрузки и изменения размера bxSlider пересчитает размеры слайдов и определит оптимальное количество слайдов, которые могут быть показаны за один раз в пределах ширины области просмотра.

Для получения дополнительной информации о параметрах bxSlider перейдите по ссылке по этой ссылке

Демо

Протестируйте эту демонстрацию в полноэкранном режиме (или на полной странице этого фрагмента SO). Измените размер окна, чтобы проверить его отзывчивость и адаптацию к нескольким слайдам. 

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>100% Fluid Width bxSlider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" />
  <style>
    li {
      border: 3px solid black;
      margin: 0 auto;
      transform: translateY(-15px)
    }
  </style>
</head>

<body>
  <ul class="bx">
    <li>
    <img src="http://placehold.it/320x180/000/fff?text=1"></li>
    <li>
    <img src="http://placehold.it/320x180/76a/0ff?text=2"></li>
    <li>
    <img src="http://placehold.it/320x180/af2/000?text=3"></li>
    <li>
    <img src="http://placehold.it/320x180/d00/fff?text=4"></li>
    <li>
    <img src="http://placehold.it/320x180/fc0/980?text=5"></li>
    <li>
    <img src="http://placehold.it/320x180/27c/930?text=6"></li>
    <li>
    <img src="http://placehold.it/320x180/f0e/000?text=7"></li>
    <li>
    <img src="http://placehold.it/320x180/0b0/fff?text=8"></li>
    <li>
    <img src="http://placehold.it/320x180/8dd/fff?text=9"></li>
    <li>
    <img src="http://placehold.it/320x180/ad5/fff?text=10"></li>
    <li>
    <img src="http://placehold.it/320x180/975/fff?text=11"></li>
    <li>
    <img src="http://placehold.it/320x180/888/6fa?text=12"></li>
  </ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script>
  var bx = $(".bx").bxSlider({
    minSlides: 1, //Value should match moveSlides value
    moveSlides: 1, //Value should match minSlides value
    maxSlides: 4, //Make total slides a numerator of this number
    slideWidth: 320, //Required for horizontal carousel
    slideMargin: 5,
    shrinkItems: true // Recalculates and adjusts when resized
  });
  </script>
</body>

</html>
...