feat(pagination): implement pagination bullets

berndartmueller · Aug 23, 2020 · 3a8328d · 3a8328d
1 parent a149369
commit 3a8328d
Show file tree

Hide file tree

Showing 19 changed files with 568 additions and 193 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -5,7 +5,8 @@
     <style>
       .image-swiper {
         border: 1px solid #ccc;
-        height: 300px;
+        background-color: #333;
+        height: 265px;
         width: 400px;
         margin: 0 auto;
         margin-top: 50px;
@@ -18,25 +19,55 @@
     </style>
   </head>
   <body>
-    <!-- Slider main container -->
-    <a class="image-slide" href="https://www.google.com" target="_blank">
-      <div class="virchual-container image-swiper">
-        <!-- Additional required wrapper -->
-        <div class="virchual__frame" style="height: 100%;"></div>
-
-        <!-- If we need navigation buttons -->
-        <div class="virchual-button-prev"></div>
-        <div class="virchual-button-next"></div>
-      </div>
-    </a>
-
     <div class="virchual-container image-swiper">
       <!-- Additional required wrapper -->
-      <div class="virchual__frame" style="height: 100%;"></div>
+      <div class="virchual__frame" style="height: 100%;">
+        <div class="virchual__slide">
+          <picture
+            ><source
+              type="image/webp"
+              srcset="
+                https://i.findheim.at/images/sm/zatt2jPaRYBCocC0BJvE4.webp,
+                https://i.findheim.at/images/md/zatt2jPaRYBCocC0BJvE4.webp 2x
+              " />
+            <source
+              type="image/jpeg"
+              srcset="
+                https://i.findheim.at/images/sm/zatt2jPaRYBCocC0BJvE4.jpg,
+                https://i.findheim.at/images/md/zatt2jPaRYBCocC0BJvE4.jpg 2x
+              " />
+            <img src="https://i.findheim.at/images/md/zatt2jPaRYBCocC0BJvE4.jpg" itemprop="image"
+          /></picture>
+        </div>
+      </div>
+
+      <button type="button" data-controls="prev" tabindex="-1" aria-controls="" class="virchual__control virchual__control--prev">
+        <svg
+          viewBox="0 0 16 16"
+          role="presentation"
+          aria-hidden="true"
+          focusable="false"
+          style="height: 20px; width: 20px; display: block; fill: currentcolor;"
+        >
+          <path
+            d="m10.8 16c-.4 0-.7-.1-.9-.4l-6.8-6.7c-.5-.5-.5-1.3 0-1.8l6.8-6.7c.5-.5 1.2-.5 1.7 0s .5 1.2 0 1.7l-5.8 5.9 5.8 5.9c.5.5.5 1.2 0 1.7-.2.3-.5.4-.8.4"
+          ></path>
+        </svg>
+      </button>
 
-      <!-- If we need navigation buttons -->
-      <div class="virchual-button-prev"></div>
-      <div class="virchual-button-next"></div>
+      <button type="button" data-controls="next" tabindex="-1" aria-controls="" class="virchual__control virchual__control--next">
+        <svg
+          viewBox="0 0 16 16"
+          role="presentation"
+          aria-hidden="true"
+          focusable="false"
+          style="height: 20px; width: 20px; display: block; fill: currentcolor;"
+        >
+          <path
+            d="m5.3 16c .3 0 .6-.1.8-.4l6.8-6.7c.5-.5.5-1.3 0-1.8l-6.8-6.7c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l5.8 5.9-5.8 5.9c-.5.5-.5 1.2 0 1.7.2.3.5.4.9.4"
+          ></path>
+        </svg>
+      </button>
     </div>
 
     <script src="index.bundle.js"></script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "postcss-copy": "^7.1.0",
     "postcss-import": "^12.0.1",
     "rollup": "^2.26.0",
+    "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-postcss": "^3.1.5",
     "rollup-plugin-serve": "^1.0.3",
     "rollup-plugin-terser": "^7.0.0",

diff --git a/rollup.config.js b/rollup.config.js
@@ -6,6 +6,7 @@ import postcss from 'rollup-plugin-postcss';
 import postcss_import from 'postcss-import';
 import postcss_copy from 'postcss-copy';
 import visualizer from 'rollup-plugin-visualizer';
+import bundleSize from 'rollup-plugin-bundle-size';
 
 export default {
   input: 'src/virchual.ts', // our source file
@@ -32,6 +33,7 @@ export default {
       typescript: require('typescript'),
     }),
     terser(), // minifies generated bundles
+    bundleSize(),
     postcss({
       plugins: [
         postcss_import({}),
@@ -41,6 +43,7 @@ export default {
           dest: 'dist',
           template: 'css/styles.[ext]',
         }),
+
         // postcss_url(),
         // postcss_url({
         //      url: "copy",