Проблемы CSS при использовании библиотеки JS «Swiper» для моего прототипа - PullRequest
Новая
       3

Проблемы CSS при использовании библиотеки JS «Swiper» для моего прототипа

4 голосов
/ 30 октября 2019

Я создаю прототипы в HTML / JS / CSS, пытаясь построить следующее:

image color extraction

К сожалению, я борюсь с CSSчасть. Ниже вы можете найти минимальную реализацию, которая полностью функциональна, но содержит 4 проблемы:

  1. При прокрутке со слайда 1 -> слайд 19 я могу прокрутить только половину слайда 19. Как придешь? Я хотел бы видеть слайд 19 целиком.

  2. Я загрузил изображение 512x512, в результате чего в памяти появляется изображение 285x285. Howcome?

  3. Я не могу использовать 'display: inline', чтобы вывести оба div: <div class="swiper-slide0">First Color</div> и <div class="swiper-container"> в одну строку (ср. Визуализация конечного результата). Howcome?

  4. JS-библиотека «Swiper» позволяет установить параметр «slidesPerView» (например, равный 5), но после применения он остается таким же, независимо от размеров экрана.

    • Я хотел бы установить blockWidth / blockHeight, основываясь на screenWidth / screenHeight устройства, который всегда применяется в диапазоне читабельности / удобства использования (например, когда экран имеет ширину 1127 пикселей, максимальное числоблоки должны быть показаны, будь то 5, 6, 7 или, может быть, только 4). Следовательно, я хочу динамически установить blockWidth / blockHeight вместо того, чтобы вводить slidesPerView, что теперь приводит к тому, что blockWidth / blockHeight изменяются при изменении размера экрана, чтобы соответствовать slidesPerView = 5.

    • Текущее решение: я изменил "ширина: 100%;"в «.swiper-container» в «width: 285px;». Затем JS автоматически назначает ширину элементов 55 пикселей. Затем я использую этот результат, чтобы вручную установить размер других элементов. Ожидаемый результат: автоматизированная альтернатива в родном JavaScript / CSS 

<!doctype html>
<html>
<head>

  <title>Prototyping</title>

  <!-- Link Swiper's CSS -->

  <!-- Override/Add -->
  <style id="color_thief-js">

    .image-section {
        margin-bottom: 80px;
    }

    .image-wrap {
        position: relative;
        line-height: 1em;
        min-height: 240px;
        background-color: var(--hover-bg-color);
        border-radius: var(--border-radius-xl);
    }

    .target-image {
        border-radius: var(--border-radius-xl);
        transition: border-radius 0.2s 0.3s;
    }

    .target-image {
        display: block;
        width: 20%;
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
    }

  </style>

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css">

  <!-- Override/Add -->
  <style id="swiper-js">

    .swiper-container {
      width: 285px;*/
      /*width: 100%;*/
      /*height: 100%;*/
    }

    .swiper-slide {
      height: 55px;
      text-align: center;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 10px;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background: #fff;
      /* Center slide text vertically */
      align-items: center;
      border: 1px solid black;
      border-radius: 10px;
    }

    .swiper-slide0 {
      width: 55px;
      height: 55px;
      text-align: center;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 10px;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background: #fff;
      border: 2px solid black;
      border-radius: 10px;
    }
  </style>

  <style id="custom">

  div.first-container {
    display:inline;
  }

  </style>

  <!-- Link Swiper's JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>

</head>
<body>

<script>

      var dcolor;
      var colorp;
      var base64String1;
      var base64String2;
      var base64String3;

      window.addEventListener('load', function() {
        document.getElementById('sf_0').addEventListener('change', function() {
          if (document.getElementById('sf_0').files[0]) {
              console.log("--- Image #1 ---");
              //console.log(document.getElementById('image_0'));
              var img1 = document.getElementById('image_0');
              var reader = new FileReader();
              reader.readAsDataURL(document.getElementById('sf_0').files[0]);
              reader.onload = function () {
                base64String1 = reader.result;
                img1.src = base64String1;
                //console.log(img1.src);
                img1.id = document.getElementById('image_0').id;
                //console.log(img1.id);
                //extractColors(img1.id, 1);
              };
              reader.onerror = function (error) {
                console.log('Error: ', error);
              };

          }
        });
      });

</script>

<div class="image-section ">
  <div class="image-wrap"><input class="source-file" id="sf_0" type='file' /><br><img class="target-image" id="image_0" alt="image_0" src="#"></div>
  <div class="first-container">
      <div class="swiper-slide0">First Color</div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
          <div class="swiper-slide">Slide 11</div>
          <div class="swiper-slide">Slide 12</div>
          <div class="swiper-slide">Slide 13</div>
          <div class="swiper-slide">Slide 14</div>
          <div class="swiper-slide">Slide 15</div>
          <div class="swiper-slide">Slide 16</div>
          <div class="swiper-slide">Slide 17</div>
          <div class="swiper-slide">Slide 18</div>
          <div class="swiper-slide">Slide 19</div>
      </div>
    </div>
  </div>
  <div class="second-container">
      <div class="swiper-slide0">Second Color</div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
          <div class="swiper-slide">Slide 11</div>
          <div class="swiper-slide">Slide 12</div>
          <div class="swiper-slide">Slide 13</div>
          <div class="swiper-slide">Slide 14</div>
          <div class="swiper-slide">Slide 15</div>
          <div class="swiper-slide">Slide 16</div>
          <div class="swiper-slide">Slide 17</div>
          <div class="swiper-slide">Slide 18</div>
          <div class="swiper-slide">Slide 19</div>
      </div>
    </div>
  </div>
  <div class="third-container">
      <div class="swiper-slide0">Third Color</div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
          <div class="swiper-slide">Slide 11</div>
          <div class="swiper-slide">Slide 12</div>
          <div class="swiper-slide">Slide 13</div>
          <div class="swiper-slide">Slide 14</div>
          <div class="swiper-slide">Slide 15</div>
          <div class="swiper-slide">Slide 16</div>
          <div class="swiper-slide">Slide 17</div>
          <div class="swiper-slide">Slide 18</div>
          <div class="swiper-slide">Slide 19</div>
      </div>
    </div>
  </div>
</div>


<!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 5,
      spaceBetween: 2.5,
      freeMode: true,
      //loop: true,
      simulateTouch: true,
    });
  </script>

</body>
</html>

Есть мысли? Спасибо!

1 Ответ

2 голосов
/ 02 ноября 2019

  1. Это вызвано границами, которые вы задали скользящим элементам. Они запутывают способ, которым Swiper вычисляет ширину и расстояние до прокрутки. Установите box-sizing: border-box на всех элементах внутри swiper, чтобы справиться с этим.

  2. Я не смог найти ничего относительно этого в вашем коде. Вы нигде не отображаете / не регистрируете размеры изображения. Или, может быть, не совсем понятно, что вы подразумеваете под «когда в памяти»

  3. CSS-код по умолчанию Swiper устанавливает margin-left: auto и margin-right: auto. Вы должны переопределить это, чтобы удалить поля. Я бы также порекомендовал выровнять элементы строк с помощью display: flex.

  4. . Для того, чтобы иметь слайды фиксированной ширины, установите slidesPerView: 'auto' в конфигурации Swiper и установите фиксированный width / height для ваших .swiper-slide элементов, которые вы можете изменить даже через точки останова медиазапроса CSS. Swiper будет автоматически адаптироваться при изменении размера. (Нажмите на ссылку «Полная страница» под фрагментом стека после его запуска и измените размер окна браузера ниже 700 пикселей для демонстрации.)

    Однако это привело к тому, что правая граница последнего слайда в каждом свипере былаотрезать даже при прокрутке вправо, насколько это возможно. Я исправил это, добавив margin-right: 1px к каждому .swiper-slide:last-child.

    . Вы также можете использовать параметр breakpoints для изменения параметров Swiper в соответствии с точками останова, которые вы можете определить. См. Официальные документы .

Я оставил ваши теги стилей в HTML-части фрагмента и добавил свои стили в CSS-часть. 

var dcolor;
var colorp;
var base64String1;
var base64String2;
var base64String3;

window.addEventListener('load', function() {
  document.getElementById('sf_0').addEventListener('change', function() {
    if (document.getElementById('sf_0').files[0]) {
      console.log("--- Image #1 ---");
      //console.log(document.getElementById('image_0'));
      var img1 = document.getElementById('image_0');
      var reader = new FileReader();
      reader.readAsDataURL(document.getElementById('sf_0').files[0]);
      reader.onload = function() {
        base64String1 = reader.result;
        img1.src = base64String1;
        //console.log(img1.src);
        img1.id = document.getElementById('image_0').id;
        //console.log(img1.id);
        //extractColors(img1.id, 1);
      };
      reader.onerror = function(error) {
        console.log('Error: ', error);
      };

    }
  });
});

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  spaceBetween: 2,
  freeMode: true,
  //loop: true,
  simulateTouch: true
});
.swiper-wrapper *,
.swiper-slide0 {
  box-sizing: border-box;
}

.first-container,
.second-container,
.third-container {
  display: flex;
  align-items: center;
  margin-bottom: 2.5px;
}

.swiper-container {
  margin: 0 !important;
  width: auto !important;
}

.swiper-slide0 {
  margin-right: 2.5px;
  flex-shrink: 0;
}

.swiper-slide {
  width: 55px !important;
}

.swiper-slide:last-child {
  margin-right: 1px;
}

@media screen and (min-width: 700px) {
  .swiper-slide,
  .swiper-slide0 {
    width: 100px !important;
    height: 100px !important;
  }
}
<style id="color_thief-js">
  .image-section {
    margin-bottom: 80px;
  }
  
  .image-wrap {
    position: relative;
    line-height: 1em;
    /*min-height: 240px;*/
    background-color: var(--hover-bg-color);
    border-radius: var(--border-radius-xl);
  }
  
  .target-image {
    border-radius: var(--border-radius-xl);
    transition: border-radius 0.2s 0.3s;
  }
  
  .target-image {
    display: block;
    width: 20%;
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
  }
</style>

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css">

<!-- Override/Add -->
<style id="swiper-js">
  .swiper-container {
    width: 285px;
  }
  
  .swiper-slide {
    height: 55px;
    text-align: center;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background: #fff;
    /* Center slide text vertically */
    align-items: center;
    border: 1px solid black;
    border-radius: 10px;
  }
  
  .swiper-slide0 {
    width: 55px;
    height: 55px;
    text-align: center;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background: #fff;
    border: 2px solid black;
    border-radius: 10px;
  }
</style>

<!-- Link Swiper's JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>

<div class="image-section ">
  <div class="image-wrap"><input class="source-file" id="sf_0" type='file' /><br><img class="target-image" id="image_0" alt="image_0" src="#"></div>
  <div class="first-container">
    <div class="swiper-slide0">First Color</div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
        <div class="swiper-slide">Slide 11</div>
        <div class="swiper-slide">Slide 12</div>
        <div class="swiper-slide">Slide 13</div>
        <div class="swiper-slide">Slide 14</div>
        <div class="swiper-slide">Slide 15</div>
        <div class="swiper-slide">Slide 16</div>
        <div class="swiper-slide">Slide 17</div>
        <div class="swiper-slide">Slide 18</div>
        <div class="swiper-slide">
          <div class="inner">Slide 19</div>
        </div>
      </div>
    </div>
  </div>
  <div class="second-container">
    <div class="swiper-slide0">Second Color</div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
        <div class="swiper-slide">Slide 11</div>
        <div class="swiper-slide">Slide 12</div>
        <div class="swiper-slide">Slide 13</div>
        <div class="swiper-slide">Slide 14</div>
        <div class="swiper-slide">Slide 15</div>
        <div class="swiper-slide">Slide 16</div>
        <div class="swiper-slide">Slide 17</div>
        <div class="swiper-slide">Slide 18</div>
        <div class="swiper-slide">Slide 19</div>
      </div>
    </div>
  </div>
  <div class="third-container">
    <div class="swiper-slide0">Third Color</div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
        <div class="swiper-slide">Slide 11</div>
        <div class="swiper-slide">Slide 12</div>
        <div class="swiper-slide">Slide 13</div>
        <div class="swiper-slide">Slide 14</div>
        <div class="swiper-slide">Slide 15</div>
        <div class="swiper-slide">Slide 16</div>
        <div class="swiper-slide">Slide 17</div>
        <div class="swiper-slide">Slide 18</div>
        <div class="swiper-slide">Slide 19</div>
      </div>
    </div>
  </div>
</div>
...