Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

CSS challenges when leveraging 'Swiper' JS Library for my prototype

Tags:

javascript

css

swiper.js

I'm prototyping in HTML/JS/CSS, trying to build the following:

image color extraction

Unfortunately, I'm struggling with the CSS part. Below you can find a minimal implementation which is fully functional, but contains 4 issues:

  1. When scrolling from slide 1 --> slide 19, I am only able to scroll halfway through slide 19. Howcome? I'd like to see slide 19 entirely.

  2. I uploaded a 512x512 image, which results in a 285x285 image when in memory. Howcome?

  3. I am not able to use 'display: inline' to bring both divs: <div class="swiper-slide0">First Color</div> and <div class="swiper-container"> on one line (cfr. visualization of end result). Howcome?

  4. 'Swiper' JS Library allows to set 'slidesPerView' (e.g. equal to 5), but once applied, it remains like that, regardless of screen dimensions.

    • I'd like to set a blockWidth/blockHeight, based on the device’s screenWidth/screenHeight which is always applied within the range of readability/usability (e.g. when the screen is 1127px wide, a maximum number of blocks should be shown, be it 5, 6, 7 or maybe only 4). Hence I want to dynamically set blockWidth/blockHeight instead of having to enter slidesPerView which now results in the fact that blockWidth/blockHeight are changed when the screen is resized to adhere to slidesPerView = 5.

    • Current solution: I changed "width: 100%;" in '.swiper-container' to "width: 285px;". The JS then automatically assigns the width of the elements to 55px. I then use this outcome to manually set the size of other elements. Expected outcome: automated alternative in native 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>

Any thoughts? Thank you!

like image 840
user1098973 Avatar asked Oct 16 '22 09:10

user1098973

1 Answers

  1. This is caused by the borders you have given to the slid elements. These mess up the way Swiper calculates the widths and how far it has to allow scrolling. Set box-sizing: border-box on all the elements inside the swiper to handle this.

  2. I wasn't able to find anything regarding this in your code. You're not displaying/logging the image dimensions anywhere. Or maybe it's just not clear what you mean by "when in memory"

  3. The Swiper default CSS sets margin-left: auto and margin-right: auto. You have to override this to remove the margin. I'd also recommend aligning the row items using display: flex.

  4. In order to have fixed width slides, set slidesPerView: 'auto' in the Swiper configuration and set a fixed width/height for your .swiper-slide elements that you can even change via CSS media query breakpoints. The swiper will automatically adapt on resize. (Click the "Full page" link below the Stack Snippet after running it and resize your browser window below 700px width for a demonstration.)

    However, this caused the right border of the last slide in each swiper to be cut off, even when scrolling as far to the right as possible. I fixed this by adding margin-right: 1px to each .swiper-slide:last-child.

    You can also use the breakpoints parameter to change Swiper options according to breakpoints that you can define. See the official docs.

I've left your style tags in the HTML part of the snippet and added my styles in the CSS part.

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>
like image 178
Constantin Groß Avatar answered Oct 20 '22 04:10

Constantin Groß
Sign in to Comment

Related questions

How to watch deep array using computed in Vuejs
How to convert wav file to spectrogram for tensorflowjs with columnTruncateLength: 232 and numFramesPerSpectrogram: 43?
Testing a custom context hook that uses a useEffect hook and apollo
Why does the 'this' keyword inside event handlers of document.body refer to the global window object?
Use external JavaScript library in Angular 8 application
Convert float number properly?
How to force an external link to open on the same tab in a Tumblr theme?
TypeError: db.admin is not a function
React insert node object
Object in loop won't cast shadow over whole lopop with Three.js
Importing and using component from custom React Component Library results in Invariant Violation: Invalid hook call
angular 8 webpack-bundle-analyzer looking for wrong polyfill files
How to prevent script injection attacks
get Zero-width non-joiner (&zwnj;) with innerHTML
How send a form with Javascript when input name is "submit"?
AngularJs: Have method return synchronously when it calls $http or $resource internally
Javascript select nested class element
angular 4 style background image when using ngFor
breakpoint on javascript in CSHTML?
how to create functions with variable arguments in javascript?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!