Skip to content
Snippets Groups Projects
Verified Commit 69d7e614 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix(slider): some small issues #239

parent b9e29170
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
development/issues/closed/239.html
+ 15
− 30
View file @ 69d7e614
......@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider view more slides #239</title>
<script src="239.mjs" type="module"></script>
<script src="./239.mjs" type="module"></script>
</head>
<body>
<h1>Slider view more slides #239</h1>
......@@ -15,44 +15,29 @@
<main style="width: 1200px">
<div class="container">
<monster-slider
data-monster-option-slides-0="3"
<monster-slider style="height:360px"
data-monster-option-slides-0="3"
>
<div slot="next">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
<path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1"/>
</svg>
</div>
<div slot="prev">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-arrow-left-square-fill" viewBox="0 0 16 16">
<path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1"/>
</svg>
</div>
<div class="slide" style="height: 450px;background-color: #ff6666;">
<h1>SLIDE 1</h1>
</div>
<div class="slide" style="height: 450px;background-color: #66ff66;width:50px">
<h1>SLIDE 2</h1>
</div>
<div class="slide" style="height: 450px;background-color: #6666ff;width:50px">
<h1>SLIDE 3</h1>
</div>
<div class="slide" style="height: 450px;background-color: #ffff66;width:50px">
<h1>SLIDE 4</h1>
</div>
<div class="slide" style="height: 450px;background-color: #66ffff;width:50px">
<h1>SLIDE 5</h1>
<div class="slide" style=";background-color: var(--monster-bg-color-primary-2); color: var(--monster-color-primary-2)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 1</div>
</div>
<div class="slide" style="height: 450px;background-color: #ff66ff;width:50px">
<h1>SLIDE 6</h1>
<div class="slide" style=";background-color: var(--monster-bg-color-secondary-3); color: var(--monster-color-secondary-3)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 2</div>
</div>
<div class="slide" style="height: 450px;background-color: #ff66cc;width:50px">
<h1>SLIDE 7</h1>
</div>
<div slot="next">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
<path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1"/>
</svg>
<div class="slide" style=";background-color: var(--monster-bg-color-primary-4); color: var(--monster-color-primary-4)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 3</div>
</div>
</monster-slider>
</div>
......
source/components/layout/slider.mjs
+ 26
− 4
View file @ 69d7e614
......@@ -49,6 +49,12 @@ const prevElementSymbol = Symbol("prevElement");
*/
const nextElementSymbol = Symbol("nextElement");
/**
* @private
* @type {symbol}
*/
const thumbnailElementSymbol = Symbol("thumbnailElement");
/**
* @private
* @type {symbol}
......@@ -499,7 +505,9 @@ function setMoveProperties(slides, index) {
this[sliderElementSymbol].style.transform =
`translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
slides[index].classList.add("current");
if (slides[index]) {
slides[index].classList.add("current");
}
this[configSymbol].lastOffset = offset;
}
......@@ -541,12 +549,22 @@ function moveTo(index, animation) {
return;
}
const visibleSlides = getVisibleSlidesFromContainerWidth.call(this);
if (totalOriginSlides <= visibleSlides) {
this[prevElementSymbol].classList.add("hidden");
this[nextElementSymbol].classList.add("hidden");
this[thumbnailElementSymbol].classList.add("hidden");
return;
}
this[prevElementSymbol].classList.remove("hidden");
this[nextElementSymbol].classList.remove("hidden");
this[thumbnailElementSymbol].classList.remove("hidden");
let slidesIndex = index + visibleSlides;
this[configSymbol].currentIndex = index;
let slidesIndex = index + getVisibleSlidesFromContainerWidth.call(this);
if (slidesIndex < 0) {
slidesIndex =
totalSlides - 1 - getVisibleSlidesFromContainerWidth.call(this);
slidesIndex = totalSlides - 1 - visibleSlides;
this[configSymbol].currentIndex = totalOriginSlides - 1;
} else if (index > totalOriginSlides) {
slidesIndex = 0;
......@@ -700,6 +718,10 @@ function initControlReferences() {
this[nextElementSymbol] = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}="next"]`,
);
this[thumbnailElementSymbol] = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}="thumbnails"]`,
);
}
/**
......
source/components/layout/style/slider.pcss
+ 5
− 1
View file @ 69d7e614
......@@ -60,7 +60,7 @@
z-index: var(--monster-z-index-sticky);
box-sizing: border-box;
top: 50%;
transform: translate(0, -50%)
transform: translate(0, -50%);
}
.prev:hover {
......@@ -118,4 +118,8 @@
}
.hidden {
display: none !important;
}
source/components/layout/stylesheet/slider.mjs
+ 1
− 1
View file @ 69d7e614
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment