Bladeren bron

Update Readme.

NaotoshiFujita 3 jaren geleden
bovenliggende
commit
1e3d508387
2 gewijzigde bestanden met toevoegingen van 65 en 2 verwijderingen
  1. 51 2
      README.md
  2. 14 0
      images/logo.svg

+ 51 - 2
README.md

@@ -1,3 +1,52 @@
-# Splide v3
+<div align="center">
+<a href="https://splidejs.com">
+  <img alt="Splide" src="./images/logo.svg" width="70">
+</a>
 
-WIP
+<h1>Splide</h1>
+
+<p>
+Splide is a lightweight, flexible and accessible slider and carousel. written in TypeScript.
+No dependencies, no Lighthouse errors.
+</p>
+
+<p>
+  <a href="https://splidejs.com/guides/getting-started/">Getting Started</a>
+  <br>
+  <a href="https://splidejs.com/">Demo</a>
+  <br>
+  <a href="https://splidejs.com/documents/">Documents</a>
+  <br>
+  <a href="https://splidejs.com/guides/themes/">Themes</a>
+  <br>
+  <a href="https://splidejs.com/guides/version3/">About v3</a>
+</p>
+</div>
+
+## Features
+
+- Written in TypeScript
+- No dependencies
+- Lightweight, less than 26kB (11kB gzipped)
+- Flexible and extensible
+- Protected by 300+ test cases
+- Multiple slides
+- Slide or fade transition by CSS
+- Supports breakpoints
+- Accepts CSS relative units
+- No need to crop images
+- Autoplay with progress bar and play/pause buttons
+- RTL and vertical direction
+- Mouse drag and touch swipe
+- Free drag mode
+- Mouse wheel navigation
+- Nested slider
+- Lazy loading
+- Thumbnail slider
+- Auto width and height
+- Accessibility friendly
+- Internet Explorer 10
+
+## License
+
+Splide is released under MIT license. © 2021 Naotoshi Fujita

+ 14 - 0
images/logo.svg

@@ -0,0 +1,14 @@
+<svg width="212.1" height="212.1" version="1.1" viewBox="0 0 56.13 56.13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <linearGradient id="logo-a">
+   <stop stop-color="#c0e900" offset="0"/>
+   <stop stop-color="#00c3f3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="logo-c" x1="-17.57" x2="-38.96" y1="124.6" y2="124.6" gradientTransform="rotate(180 -5.58 76.61)" gradientUnits="userSpaceOnUse" xlink:href="#logo-a"/>
+  <linearGradient id="logo-b" x1="-42.43" x2="-11.16" y1="125.1" y2="125.1" gradientTransform="translate(67.29 -97.09)" gradientUnits="userSpaceOnUse" xlink:href="#logo-a"/>
+ </defs>
+ <g stroke-linecap="square" stroke-linejoin="round" stroke-width="1.137">
+  <path d="m9.354 18.71 28.06 28.06-9.354 9.354-28.06-28.06zm-9.354 9.354 28.06-28.06 9.354 9.354-28.06 28.06z" fill="url(#logo-c)" opacity=".996" style="paint-order:stroke fill markers"/>
+  <path d="m46.77 37.42-28.06-28.06 9.354-9.354 28.06 28.06zm9.354-9.354-28.06 28.06-9.354-9.354 28.06-28.06z" fill="url(#logo-b)" opacity=".996" style="paint-order:stroke fill markers"/>
+ </g>
+</svg>