I'm prototyping in HTML/JS/CSS, trying to build the following:
Unfortunately, I'm struggling with the CSS part. Below you can find a minimal implementation which is fully functional, but contains 4 issues:
-
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.
-
I uploaded a 512x512 image, which results in a 285x285 image when in memory. Howcome?
-
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? -
'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!
Edit - 31/10/19: Since nobody seems to be able to provide me with an answer, maybe someone could point me to another community where I might be able to find some guidance? In the meanwhile I already have a fully working implementation of the color selection part of the prototype: http://urbexco-acceptance.droppages.com/
from CSS challenges when leveraging 'Swiper' JS Library for my prototype
No comments:
Post a Comment