Upgrade version

README.md

@@ -76,6 +76,42 @@ npm install svelte-carousel -D
 <button on:click={handleNextClick}>Next</button>
 ```
 
+## Vite support
+1. Extend `optimizeDeps.include` in `vite.config.js`
+
+```js
+export default defineConfig({
+  optimizeDeps: {
+    include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']
+  }
+})
+
+```
+
+2. Import and use it:
+
+```jsx
+
+<script>
+  import Carousel from 'svelte-carousel'
+
+  let carousel; // for calling methods of the carousel instance
+  const handleNextClick = () => {
+    carousel.goToNext()
+  }
+</script>
+
+<Carousel
+  bind:this={carousel}
+>
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</Carousel>
+
+<button on:click={handleNextClick}>Next</button>
+```
+
 ## Props
 | Prop                      | Type       | Default         | Description                                   | 
 |---------------------------|------------|-----------------|-----------------------------------------------|

docs/index.css

@@ -3,18 +3,18 @@ code[class*="language-"],pre[class*="language-"] {color:#ccc;background:none;fon
 .img-container.svelte-4bw00n.svelte-4bw00n{display:block;width:100%;height:200px}.img-container.svelte-4bw00n>img.svelte-4bw00n{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.custom-arrow.svelte-4bw00n.svelte-4bw00n{width:20px;background-color:#000000;opacity:0.3;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.custom-arrow.svelte-4bw00n.svelte-4bw00n:hover{opacity:0.5}.custom-arrow.svelte-4bw00n>i.svelte-4bw00n{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.custom-arrow-prev.svelte-4bw00n.svelte-4bw00n{left:0}.custom-arrow-prev.svelte-4bw00n>i.svelte-4bw00n{transform:rotate(135deg);right:-4px}.custom-arrow-next.svelte-4bw00n.svelte-4bw00n{right:0}.custom-arrow-next.svelte-4bw00n>i.svelte-4bw00n{transform:rotate(-45deg);left:-4px}.custom-dots.svelte-4bw00n.svelte-4bw00n{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding:0 20px}
 .color-container.svelte-1bsdhrs.svelte-1bsdhrs{height:150px;width:100%;display:flex;align-items:center;justify-content:center;user-select:none}.color-container.svelte-1bsdhrs>p.svelte-1bsdhrs{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;font-style:italic;font-size:18px}
 .divider.svelte-10zimfx{margin-top:15px;margin-bottom:15px;height:1px}
-:root{--sc-color-rgb-light-50p:rgba(93,93,93,0.5);--sc-color-rgb-light:#5d5d5d;--sc-color-hex-dark-50p:rgba(30,30,30,0.5);--sc-color-hex-dark:#1e1e1e}.sc-carousel__carousel-container.svelte-h7bw08{display:flex;width:100%;flex-direction:column;align-items:center}.sc-carousel__content-container.svelte-h7bw08{position:relative;display:flex;width:100%}.sc-carousel__pages-window.svelte-h7bw08{flex:1;display:flex;overflow:hidden;box-sizing:border-box;position:relative}.sc-carousel__pages-container.svelte-h7bw08{width:100%;display:flex;transition-property:transform}.sc-carousel__arrow-container.svelte-h7bw08{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.sc-carousel-progress__container.svelte-h7bw08{width:100%;height:5px;background-color:var(--sc-color-rgb-light-50p);position:absolute;bottom:0}
 .custom-dot__dot-container.svelte-1ufq367{height:25px;width:25px;background-color:#727272;border-radius:50%;opacity:0.7;display:flex;align-items:center;justify-content:center;margin:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}.custom-dot__dot-container.svelte-1ufq367:hover{opacity:0.9}.custom-dot__dot-container_active.svelte-1ufq367{background-color:#009800}.custom-dot__symbol.svelte-1ufq367{font-size:14px;font-weight:bold;color:#eaeaea}
+:root{--sc-color-rgb-light-50p:rgba(93,93,93,0.5);--sc-color-rgb-light:#5d5d5d;--sc-color-hex-dark-50p:rgba(30,30,30,0.5);--sc-color-hex-dark:#1e1e1e}.sc-carousel__carousel-container.svelte-h7bw08{display:flex;width:100%;flex-direction:column;align-items:center}.sc-carousel__content-container.svelte-h7bw08{position:relative;display:flex;width:100%}.sc-carousel__pages-window.svelte-h7bw08{flex:1;display:flex;overflow:hidden;box-sizing:border-box;position:relative}.sc-carousel__pages-container.svelte-h7bw08{width:100%;display:flex;transition-property:transform}.sc-carousel__arrow-container.svelte-h7bw08{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.sc-carousel-progress__container.svelte-h7bw08{width:100%;height:5px;background-color:var(--sc-color-rgb-light-50p);position:absolute;bottom:0}
 .albums-container.svelte-tqqkfc.svelte-tqqkfc{display:flex;justify-content:center;flex-wrap:wrap}.album-container.svelte-tqqkfc.svelte-tqqkfc{width:250px;padding:10px;background-color:#c6c6c6;border-radius:5px;margin:5px}.album-title.svelte-tqqkfc.svelte-tqqkfc{font-size:16px}.album-size.svelte-tqqkfc.svelte-tqqkfc{font-size:10px;color:#585858}.album-tag.svelte-tqqkfc.svelte-tqqkfc{background-color:#8f8f8f;border-radius:5px;padding:1px 5px;color:#ffffff;margin-top:3px;margin-bottom:3px;display:inline-block;font-size:10px}.album-tag.svelte-tqqkfc.svelte-tqqkfc:not(:last-child){margin-right:3px}.album-arrow.svelte-tqqkfc.svelte-tqqkfc{width:20px;background-color:#000000;opacity:0;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.album-arrow.svelte-tqqkfc>i.svelte-tqqkfc{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.album-container.svelte-tqqkfc:hover .album-arrow.svelte-tqqkfc{opacity:0.5}.album-arrow-prev.svelte-tqqkfc.svelte-tqqkfc{left:0}.album-arrow-prev.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(135deg);right:-4px}.album-arrow-next.svelte-tqqkfc.svelte-tqqkfc{right:0}.album-arrow-next.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(-45deg);left:-4px}
 .docs__main-layout__main-container.svelte-1g4wbsx.svelte-1g4wbsx{background-color:#eaeaea}.docs__main-layout__header-container.svelte-1g4wbsx.svelte-1g4wbsx{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;padding:10px;box-sizing:border-box;background-color:#f0e68c}.docs__main-layout__logo-container.svelte-1g4wbsx.svelte-1g4wbsx{position:relative;max-width:min(90%,500px)}.docs__main-layout__version.svelte-1g4wbsx.svelte-1g4wbsx{position:absolute;top:20px;right:20px;background-color:#fff;padding:3px 7px;border-radius:5px;line-height:14px;font-size:14px}.docs__main-layout__logo.svelte-1g4wbsx.svelte-1g4wbsx{max-height:100%;max-width:100%;object-fit:contain}.docs__main-layout__links-container.svelte-1g4wbsx.svelte-1g4wbsx{display:flex;justify-content:center;padding:10px}.docs__main-layout__links-container.svelte-1g4wbsx>a.svelte-1g4wbsx{text-decoration:none;display:flex;align-items:center;background-color:#ffffff;padding:5px;border-radius:3px}.docs__main-layout__links-container.svelte-1g4wbsx>a.svelte-1g4wbsx:not(:last-child){margin-right:10px}.docs__main-layout__links-container.svelte-1g4wbsx>a.svelte-1g4wbsx:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}.docs__main-layout__links-container.svelte-1g4wbsx>a.svelte-1g4wbsx:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}.docs__main-layout__link-icon.svelte-1g4wbsx.svelte-1g4wbsx{width:25px}.docs__main-layout__link-text.svelte-1g4wbsx.svelte-1g4wbsx{color:#009800;font-size:18px;font-weight:500}.docs__main-layout__content-container.svelte-1g4wbsx.svelte-1g4wbsx{margin:0 auto}@media screen and (min-width:0px){.docs__main-layout__content-container.svelte-1g4wbsx.svelte-1g4wbsx{width:95%}}@media screen and (min-width:768px){.docs__main-layout__content-container.svelte-1g4wbsx.svelte-1g4wbsx{width:70%}}@media screen and (min-width:992px){.docs__main-layout__content-container.svelte-1g4wbsx.svelte-1g4wbsx{width:60%}}@media screen and (min-width:1200px){.docs__main-layout__content-container.svelte-1g4wbsx.svelte-1g4wbsx{width:50%}}
 .sc-carousel-dots__container.svelte-1oj5bge{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 30px}.sc-carousel-dots__dot-container.svelte-1oj5bge{height:calc(var(--sc-dot-size) + 14px);width:calc(var(--sc-dot-size) + 10px);display:flex;align-items:center;justify-content:center}
 :root{--sc-arrow-size:2px}.sc-carousel-arrow__circle.svelte-9ztt4p{width:20px;height:20px;border-radius:50%;background-color:var(--sc-color-rgb-light-50p);display:flex;align-items:center;justify-content:center;transition:opacity 100ms ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.sc-carousel-arrow__circle.svelte-9ztt4p:hover{opacity:0.9}.sc-carousel-arrow__arrow.svelte-9ztt4p{border:solid var(--sc-color-hex-dark);border-width:0 var(--sc-arrow-size) var(--sc-arrow-size) 0;padding:var(--sc-arrow-size);position:relative}.sc-carousel-arrow__arrow-next.svelte-9ztt4p{transform:rotate(-45deg);left:calc(var(--sc-arrow-size) / -2)}.sc-carousel-arrow__arrow-prev.svelte-9ztt4p{transform:rotate(135deg);right:calc(var(--sc-arrow-size) / -2)}.sc-carousel-arrow__circle_disabled.svelte-9ztt4p,.sc-carousel-arrow__circle_disabled.svelte-9ztt4p:hover{opacity:0.5}
 .sc-carousel-progress__indicator.svelte-nuyenl{height:100%;background-color:var(--sc-color-hex-dark-50p)}
 .image-container.svelte-1cv82er{display:block;width:100%;height:150px}img.svelte-1cv82er{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
-td.svelte-17sscyq{padding:2px 10px}
 tr.svelte-yxhgu7{border-bottom:2px solid #009800}
-th.svelte-1w3aa8v{padding:5px 10px}
 .table-wrapper.svelte-1dxl093{overflow-x:auto}table.svelte-1dxl093{border-collapse:collapse;width:100%}
+td.svelte-17sscyq{padding:2px 10px}
+th.svelte-1w3aa8v{padding:5px 10px}
 :root{--sc-dot-size:6px;--sc-active-dot-size:8px;--sc-dot-size-animation-time:250ms}.sc-carousel-dot__dot.svelte-1uelw0b{background-color:var(--sc-color-rgb-light);border-radius:50%;display:inline-block;opacity:0.5;transition:opacity 100ms ease,height var(--sc-dot-size-animation-time) ease,width var(--sc-dot-size-animation-time) ease;cursor:pointer;-webkit-tap-highlight-color:transparent;height:var(--sc-dot-size);width:var(--sc-dot-size)}.sc-carousel-dot__dot.svelte-1uelw0b:hover{opacity:0.9}.sc-carousel-dot__dot_active.svelte-1uelw0b{opacity:0.7;height:var(--sc-active-dot-size);width:var(--sc-active-dot-size)}
 h1.docs__title{margin:16px 0}h1.docs__title .docs__anchor::before{top:15px}
 h2.docs__title{margin:14px 0}h2.docs__title .docs__anchor::before{top:8px}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-carousel",
-  "version": "1.0.17-rc3",
+  "version": "1.0.17-rc4",
   "description": "Svelte carousel",
   "main": "src/main.js",
   "author": "vadimkorr",

src/docs/Layouts/Main.svelte

@@ -32,7 +32,9 @@
 <div class="docs__main-layout__main-container">
   <div class="docs__main-layout__header-container">
     <div class="docs__main-layout__logo-container">
-      <Carousel>
+      <Carousel
+        initialPageIndex={1}
+      >
         {#each Array.from(Array(3).keys()) as index (index)}
           <img class="docs__main-layout__logo" src="./svelte-carousel-logo-md-full-width.png" alt="svelte-carousel-logo" />
         {/each}