"
- + prevBtn
+ + this._prev.Render()
+ "
" + slides + "
"
- + nextBtn
+ + this._next.Render()
+ "
";
}
@@ -56,22 +76,8 @@ export class SlideShow extends UIElement {
}
InnerUpdate(htmlElement) {
- const nextButton = document.getElementById("nextbtn-" + this.id);
- if (nextButton === undefined || nextButton === null) {
- return;
- }
-
- const prevButton = document.getElementById("prevbtn-" + this.id);
- const self = this;
- nextButton.onclick = () => {
- const current = self._currentSlide.data;
- self.MoveTo(current + 1);
- }
- prevButton.onclick = () => {
- const current = self._currentSlide.data;
- self.MoveTo(current - 1);
- }
-
+ this._next.Update();
+ this._prev.Update();
}
Activate() {
diff --git a/index.css b/index.css
index 1028fce..d1f375c 100644
--- a/index.css
+++ b/index.css
@@ -407,7 +407,7 @@ body {
.prev-button {
background-color: black;
opacity: 0.3;
- width: 3.0em;
+ width: 4.0em;
height: 100%;
padding-left: 0.5em;
@@ -419,8 +419,6 @@ body {
z-index: 5060;
- content:url(assets/arrow-left-smooth.svg);
-
border-radius: 1em;
}
@@ -428,7 +426,7 @@ body {
.next-button {
background-color: black;
opacity: 0.3;
- width: 3.0em;
+ width: 4.0em;
height: 100%;
padding-left: 0.5em;
padding-right: 0.5em;
@@ -441,9 +439,26 @@ body {
z-index: 5060;
- content:url(assets/arrow-right-smooth.svg);
}
+.vspan {
+ height: calc(50% - 3em);
+}
+
+.prev-button img {
+ margin-left: -1em;
+ width: 6em;
+ text-align: center;
+}
+
+.next-button img {
+ margin-left: -1em;
+ width: 6em;
+ text-align: center;
+}
+
+
+
.slide > span img {
height: auto;