Initial Commit

assets/scss/slider.scss

@@ -0,0 +1,133 @@
+$color: {{ .Param "color" }};
+
+* {
+  box-sizing: border-box;
+}
+  
+.slider {
+  text-align: center;
+  margin: 0;
+  margin-top: 5.5rem;
+}
+
+.slides {
+  display: flex;
+  
+  overflow-x: hidden;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;  
+  
+  scroll-behavior: smooth;
+  scroll-snap-stop: inherit;
+  
+  scroll-snap-points-x: repeat(300px);
+  scroll-snap-type: mandatory;
+}
+.slides::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.slides > div {
+  scroll-snap-align: start;
+  flex-shrink: 0;
+  width: 100%;
+  height: calc(100vh - 5.5rem);
+  margin-right: 0.5rem;
+  border-radius: 10px;
+  background: #eee;
+  transform-origin: center center;
+  transform: scale(1);
+  transition: transform 0.5s;
+  position: relative;
+  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.slide > img {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.slide-links {
+  position: absolute;
+  margin: 0;
+  top: calc(100vh - 5rem);
+  left: 0;
+  right: 0;
+}
+
+.slide-link {
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  background: $color;
+  text-decoration: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  margin: 0 0.5rem 0 0.5rem;
+  position: relative;
+  z-index: 1;
+}
+
+.slide-link:hover {
+  cursor: pointer;
+  background: #444;
+}
+
+.slide-link:active {
+  top: 1px;
+}
+
+.slide-link-active {
+  background: #444;
+}
+
+.slider-navigation-left {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  height: inherit;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  color: $color;
+  font-size: 3.5em;
+}
+
+.slider-navigation-left:hover {
+  cursor: pointer;
+  color: #444;
+}
+
+.slider-navigation-right {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  height: inherit;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  color: $color;
+  font-size: 3.5em;
+}
+
+.slider-navigation-right:active > i {
+  top: 1px;
+}
+
+.slider-navigation-right:hover {
+  cursor: pointer;
+  /* color: #444; */
+}