feat: add sly demo slider

index.html

@@ -14,6 +14,7 @@ <h2>Short HTML Code maybe helpful for your project</h2>
         <li><a href="/dark-light-icon">Dark Light Icon</a></li>
         <li><a href="/coundown-svg-icon">Coundown SVG </a></li>
         <li><a href="/vietnam-province-svg-map">Vietnam SVG Province Map</a></li>
+        <li><a href="/sly">History slider (SLY)</a></li>
     </ul>
 </body>
 

sly/css/style.css

@@ -0,0 +1,218 @@
+h2 {
+    margin: 0;
+}
+
+.container {
+    width: 100%;
+    max-width: 1168px;
+    margin: 0 auto;
+    padding-left: 16px;
+    padding-right: 16px;
+}
+
+.history {
+  overflow: hidden;
+  position: relative;
+  padding-top: 25px;
+  padding-bottom: 20px;
+  margni-inline: auto;
+}
+
+@media (min-width: 48em) {
+  .history {
+    padding-bottom: 48px;
+  }
+}
+
+.history__wrapp {
+  display: flex;
+  justify-content: flex-start;
+  column-gap: 15px;
+}
+
+.history__slider--content {
+  transition: transform 0.3s ease-in-out;
+}
+
+.history__slider--container {
+  padding-bottom: 20px;
+}
+
+@media (min-width: 48em) {
+  .history__slider--container {
+    padding-bottom: 50px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .history__slider--wrapper {
+    width: calc(1168px + (100vw - 1168px) / 2);
+  }
+}
+
+.history__slider--item {
+  display: flex !important;
+  flex-direction: row;
+  column-gap: 15px;
+}
+
+.history__slider--item.opacity {
+  opacity: 0;
+}
+
+@media only screen and (max-width: 767px) {
+  .history__slider--item.opacity figure {
+    display: none;
+  }
+
+  .history__slider--item.opacity:last-child {
+    display: none !important;
+  }
+}
+
+.history__slider--item > div,
+.history__slider--item > figure {
+  width: 165px;
+  height: 165px;
+  display: flex;
+  flex-direction: column;
+  background: var(--dark);
+  color: var(--white);
+  padding: 11px;
+}
+
+@media (min-width: 48em) {
+  .history__slider--item > div,
+  .history__slider--item > figure {
+    width: 176px;
+    height: 176px;
+  }
+}
+
+.history__slider--item > div {
+  justify-content: center;
+}
+
+.history__slider--item > div span {
+  font-size: 20px;
+  line-height: 24px;
+  text-transform: uppercase;
+}
+
+.history__slider--item > div h2 {
+  font-size: 65px;
+  line-height: 1;
+  font-family: TTSupermolot;
+  border-bottom: 2px solid var(--white);
+  padding-bottom: 10px;
+}
+
+@media only screen and (max-width: 767px) {
+  .history__slider--item > div h2 {
+    font-size: 60px;
+    white-space: nowrap;
+  }
+}
+
+.history__slider--item > div small {
+  font-size: 16px;
+  font-size: 16px;
+  line-height: 1;
+  font-weight: 300;
+}
+
+.history__slider--item > figure {
+  background: var(--gray);
+  justify-content: center;
+  align-items: center;
+}
+
+.history__slider--item > figure img {
+  max-width: calc(100% - 22px);
+}
+
+.history .scroll {
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  column-gap: 25px;
+}
+
+.history .scroll .slidecontainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.history .scroll .slider-input {
+  display: block;
+  -webkit-appearance: none;
+  border: none;
+  padding: 0;
+  width: 50px;
+  min-height: 2px;
+  border-radius: 5px;
+  background: var(--dark);
+  outline: none;
+  -webkit-transition: 0.2s;
+  transition: opacity 0.2s;
+  border-radius: 5px;
+  position: relative;
+}
+
+.history .scroll .slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 2px;
+  border-radius: 5px;
+  background: var(--primary);
+  cursor: pointer;
+}
+
+.history .scroll .slider-input::-moz-range-thumb {
+  width: 14px;
+  height: 2px;
+  border-radius: 5px;
+  background: var(--primary);
+  cursor: pointer;
+}
+
+.history .scroll .scrollbar {
+  margin: 1em 0 1em 0;
+  height: 3px;
+  background: #707070;
+  border-radius: 5px;
+  line-height: 0;
+  width: 100px;
+}
+
+.history .scroll .scrollbar .handle {
+  width: 15px;
+  height: 100%;
+  background: #00c1d5;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.history .scroll .scrollbar .handle .mousearea {
+  position: absolute;
+  top: -9px;
+  left: 0;
+  width: 100%;
+  height: 20px;
+}
+
+.button-arrow {
+    cursor: pointer;
+}
+
+.scroll-button .button-arrow.prev::before {
+    background: url(images/arrow-left.svg) no-repeat right center;
+    background-size: contain;
+}
+
+.scroll-button .button-arrow.next::before {
+    background: url(images/arrow-right.svg) no-repeat right center;
+    background-size: contain;
+}