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 Show whitespace changes
Inline Side-by-side
development/issues/closed/239.html
+ 15
− 30
View file @ 69d7e614
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider view more slides #239</title> <title>Slider view more slides #239</title>
<script src="239.mjs" type="module"></script> <script src="./239.mjs" type="module"></script>
</head> </head>
<body> <body>
<h1>Slider view more slides #239</h1> <h1>Slider view more slides #239</h1>
...@@ -15,44 +15,29 @@ ...@@ -15,44 +15,29 @@
<main style="width: 1200px"> <main style="width: 1200px">
<div class="container"> <div class="container">
<monster-slider <monster-slider style="height:360px"
data-monster-option-slides-0="3" 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"> <div slot="prev">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" <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"> 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"/> <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> </svg>
</div> </div>
<div class="slide" style="height: 450px;background-color: #ff6666;"> <div class="slide" style=";background-color: var(--monster-bg-color-primary-2); color: var(--monster-color-primary-2)">
<h1>SLIDE 1</h1> <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: #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> </div>
<div class="slide" style="height: 450px;background-color: #ff66ff;width:50px"> <div class="slide" style=";background-color: var(--monster-bg-color-secondary-3); color: var(--monster-color-secondary-3)">
<h1>SLIDE 6</h1> <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 2</div>
</div> </div>
<div class="slide" style="height: 450px;background-color: #ff66cc;width:50px"> <div class="slide" style=";background-color: var(--monster-bg-color-primary-4); color: var(--monster-color-primary-4)">
<h1>SLIDE 7</h1> <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 3</div>
</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> </div>
</monster-slider> </monster-slider>
</div> </div>
......
source/components/layout/slider.mjs
+ 26
− 4
View file @ 69d7e614
...@@ -49,6 +49,12 @@ const prevElementSymbol = Symbol("prevElement"); ...@@ -49,6 +49,12 @@ const prevElementSymbol = Symbol("prevElement");
*/ */
const nextElementSymbol = Symbol("nextElement"); const nextElementSymbol = Symbol("nextElement");
/**
* @private
* @type {symbol}
*/
const thumbnailElementSymbol = Symbol("thumbnailElement");
/** /**
* @private * @private
* @type {symbol} * @type {symbol}
...@@ -499,7 +505,9 @@ function setMoveProperties(slides, index) { ...@@ -499,7 +505,9 @@ function setMoveProperties(slides, index) {
this[sliderElementSymbol].style.transform = this[sliderElementSymbol].style.transform =
`translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`; `translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
if (slides[index]) {
slides[index].classList.add("current"); slides[index].classList.add("current");
}
this[configSymbol].lastOffset = offset; this[configSymbol].lastOffset = offset;
} }
...@@ -541,12 +549,22 @@ function moveTo(index, animation) { ...@@ -541,12 +549,22 @@ function moveTo(index, animation) {
return; 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; this[configSymbol].currentIndex = index;
let slidesIndex = index + getVisibleSlidesFromContainerWidth.call(this);
if (slidesIndex < 0) { if (slidesIndex < 0) {
slidesIndex = slidesIndex = totalSlides - 1 - visibleSlides;
totalSlides - 1 - getVisibleSlidesFromContainerWidth.call(this);
this[configSymbol].currentIndex = totalOriginSlides - 1; this[configSymbol].currentIndex = totalOriginSlides - 1;
} else if (index > totalOriginSlides) { } else if (index > totalOriginSlides) {
slidesIndex = 0; slidesIndex = 0;
...@@ -700,6 +718,10 @@ function initControlReferences() { ...@@ -700,6 +718,10 @@ function initControlReferences() {
this[nextElementSymbol] = this.shadowRoot.querySelector( this[nextElementSymbol] = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}="next"]`, `[${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 @@ ...@@ -60,7 +60,7 @@
z-index: var(--monster-z-index-sticky); z-index: var(--monster-z-index-sticky);
box-sizing: border-box; box-sizing: border-box;
top: 50%; top: 50%;
transform: translate(0, -50%) transform: translate(0, -50%);
} }
.prev:hover { .prev:hover {
...@@ -118,4 +118,8 @@ ...@@ -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