From da4f6224171eb1c2a50fca892084649eb17dad7a Mon Sep 17 00:00:00 2001
From: SEMICS <47321195+semics-tech@users.noreply.github.com>
Date: Wed, 8 Nov 2023 07:35:30 +0000
Subject: [PATCH] correct options for ThumbnailsExample.vue

correct options inline with thumbnail carousel on main splicejs page

https://splidejs.com/tutorials/thumbnail-carousel/
---
 examples/src/components/ThumbnailsExample.vue | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/examples/src/components/ThumbnailsExample.vue b/examples/src/components/ThumbnailsExample.vue
index 0260771..52f35f5 100644
--- a/examples/src/components/ThumbnailsExample.vue
+++ b/examples/src/components/ThumbnailsExample.vue
@@ -44,24 +44,32 @@ export default defineComponent( {
     const slides = generateSlides();
 
     const mainOptions: Options = {
-      type      : 'loop',
-      perPage   : 2,
-      perMove   : 1,
-      gap       : '1rem',
-      pagination: false,
+      type       : 'fade',
+      heightRatio: 0.5,
+      pagination : false,
+      arrows     : false,
+      cover      : true,
     };
 
     const thumbsOptions: Options = {
-      type        : 'slide',
-      rewind      : true,
-      gap         : '1rem',
-      pagination  : false,
-      fixedWidth  : 110,
-      fixedHeight : 70,
-      cover       : true,
-      focus       : 'center',
-      isNavigation: true,
-      updateOnMove: true,
+      rewind          : true,
+      fixedWidth      : 104,
+      fixedHeight     : 58,
+      isNavigation    : true,
+      gap             : 10,
+      focus           : 'center',
+      pagination      : false,
+      cover           : true,
+      dragMinThreshold: {
+        mouse: 4,
+        touch: 10,
+      },
+      breakpoints : {
+        640: {
+          fixedWidth  : 66,
+          fixedHeight : 38,
+        },
+      },
     };
 
     onMounted( () => {