Added first template version #45

zetareticoli · Apr 27, 2022 · c039f9b · c039f9b
1 parent 91247f9
commit c039f9b
Show file tree

Hide file tree

Showing 2 changed files with 189 additions and 0 deletions.
diff --git a/lib/src/fullpage/fullpage.html b/lib/src/fullpage/fullpage.html
@@ -0,0 +1,41 @@
+<link rel="stylesheet" href="../cssui.css">
+<link rel="stylesheet" href="fullpage.css">
+
+<div data-slider>
+  <div data-slides>
+    <section id="slide-1" data-slide="1">
+      Slide 1
+      <nav data-slide-nav="arrows">
+        <a data-slide-arrow="prev" href="" title="Prev">Prev</a>
+        <a data-slide-arrow="next" href="#slide-2" title="Next">Next</a>
+      </nav>
+    </section>
+    <section id="slide-2" data-slide="2">
+      Slide 2
+      <nav data-slide-nav="arrows">
+        <a data-slide-arrow="prev" href="#slide-1" title="Prev">Prev</a>
+        <a data-slide-arrow="next" href="#slide-3" title="Next">Next</a>
+      </nav>
+    </section>
+    <section id="slide-3" data-slide="3">
+      Slide 3
+      <nav data-slide-nav="arrows">
+        <a data-slide-arrow="prev" href="#slide-2" title="Prev">Prev</a>
+        <a data-slide-arrow="next" href="#slide-4" title="Next">Next</a>
+      </nav>
+    </section>
+    <section id="slide-4" data-slide="4">
+      Slide 4
+      <nav data-slide-nav="arrows">
+        <a data-slide-arrow="prev" href="#slide-3" title="Prev">Prev</a>
+        <a data-slide-arrow="next" title="Next" data-arrow-disabled>Next</a>
+      </nav>
+    </section>
+  </div>
+  <!--<nav data-slide-nav="dots">
+    <a href="#slide-1"></a>
+    <a href="#slide-2"></a>
+    <a href="#slide-3"></a>
+    <a href="#slide-4"></a>
+  </nav>-->
+</div>
diff --git a/lib/src/fullpage/fullpage.scss b/lib/src/fullpage/fullpage.scss
@@ -0,0 +1,148 @@
+[data-slider] {
+  --slider-height: 100vh; // Set the slider total height, slides inherits this value
+  --slider-direction: x; // Set the slider direction
+  --slider-scroll: mandatory;
+  --slide-size: 100%;
+  --slide-snap-align: start;
+  --slide-padding: 12px;
+  --slide-arrow-color: black;
+
+  position: relative;
+  width: 100%;
+  height: var(--slider-height);
+}
+
+[data-slider] {
+  &::before,
+  &::after {
+    position: absolute;
+    top: calc(50% - var(--slide-padding));
+    transform: translateY(-50%);
+    display: block;
+    content: "";
+    border: solid var(--slide-arrow-color);
+    border-width: 0 3px 3px 0;
+    padding: 10px;
+    outline: 0;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  &::before {
+    left: calc(var(--slide-padding) * 2);
+    transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+
+    [data-slides] > [data-slide="1] ~ & {
+      display: none;
+    }
+  }
+
+  &::after {
+    right: calc(var(--slide-padding) * 2);
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+  }
+}
+
+[data-slides] {
+  display: flex;
+  height: 100%;
+  scroll-snap-type: var(--slider-direction) var(--slider-scroll);
+  scroll-snap-padding: 0 50%;
+  overflow-x: scroll;
+  position: relative;
+  z-index: 0;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+
+  > [data-slide] {
+    position: relative;
+    padding: var(--slide-padding);
+    scroll-snap-align: var(--slide-snap-align);
+    height: 100%;
+    min-width: var(--slide-size);
+    box-sizing: border-box;
+  }
+
+  // Colors - Only for demo purpose
+
+  > [data-slide]:nth-child(1) {
+    background: #6ee7b7;
+    z-index: 90;
+  }
+
+  > [data-slide]:nth-child(2) {
+    background: #67e8f9;
+  }
+
+  > [data-slide]:nth-child(3) {
+    background: #93c5fd;
+  }
+
+  > [data-slide]:nth-child(4) {
+    background: #c4b5fd;
+  }
+}
+
+[data-slide-nav="dots"] {
+  position: absolute;
+  bottom: var(--slide-padding);
+  left: var(--slide-padding);
+  width: 200px;
+  text-align: center;
+  z-index: 10;
+  display: flex;
+}
+
+[data-slide-nav="dots"] > a {
+  display: inline-block;
+  height: 15px;
+  width: 15px;
+  border-radius: 50%;
+  background-color: black;
+  margin: 0 10px 0 10px;
+
+  &:active {
+    background-color: red;
+  }
+}
+
+[data-slide-arrow] {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: block;
+  width: 2rem;
+  height: 2rem;
+  font-size: 0;
+  z-index: 100;
+}
+
+[data-slide-arrow="next"] {
+  right: var(--slide-padding);
+}
+
+[data-slide-arrow="prev"] {
+  left: var(--slide-padding);
+}
+
+/*
+[data-slide-nav="dots"] > a:first-child,
+[data-slide="1"]:target ~ [data-slide-nav="dots"] > a:first-child {
+  background: white;
+}
+
+[data-slide="2"]:target ~ [data-slide-nav="dots"] > a:nth-child(2) {
+  background: white;
+}
+
+[data-slide="3"]:target ~ [data-slide-nav="dots"] > a:nth-child(3) {
+  background: white;
+}
+
+[data-slide="4"]:target ~ [data-slide-nav="dots"] > a:nth-child(4) {
+  background: white;
+}
+*/
+