v2.1.0

.gitignore

@@ -1,21 +1,16 @@
-# Настройки редакторов
-
-.idea
-.vscode
-
 # Node.js
 
 node_modules
 
 # Yarn (https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored)
 
-**/.pnp.*
-**/.yarn/*
-!**/.yarn/patches
-!**/.yarn/plugins
-!**/.yarn/releases
-!**/.yarn/sdks
-!**/.yarn/versions
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 
 # ESLint
 

.npmignore

@@ -1,5 +1,6 @@
 .yarn
 .editorconfig
-.nvmrc
+.pnp.cjs
+.pnp.loader.mjs
 .prettierrc
 .yarnrc.yml

.yarnrc.yml

@@ -1,7 +1,5 @@
-nodeLinker: node-modules
+compressionLevel: mixed
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+enableGlobalCache: false
 
-yarnPath: .yarn/releases/yarn-3.6.0.cjs
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

README.md

@@ -2,7 +2,7 @@
 
 ## Требования
 
-- [Swiper](https://github.com/nolimits4web/swiper) версии 4.5.x
+- [Swiper](https://github.com/nolimits4web/swiper) версии ^10.2.0
 
 ## Подключение и настройка
 

index.js

@@ -97,8 +97,10 @@ const show = async (duration = 500, easing = 'linear') => {
 };
 
 const init = async (items = [], options = {}, index = 0) => {
-    const {Swiper, Navigation, Pagination} = await import('swiper');
-    Swiper.use([Navigation, Pagination]);
+    const [{default: Swiper}, {Navigation, Pagination}] = await Promise.all([
+        import('swiper'),
+        import('swiper/modules'),
+    ]);
 
     let isVideoInGallery = false;
     items = items.map((item) => {
@@ -131,9 +133,9 @@ const init = async (items = [], options = {}, index = 0) => {
             },
             set init(val) {
                 this.state = val;
-                this.callback.forEach((i) => {
+                for (const i of this.callback) {
                     i(val);
-                });
+                }
             },
             callback: [],
             addListener(callback) {
@@ -153,12 +155,12 @@ const init = async (items = [], options = {}, index = 0) => {
                 <button class="advdominion-lg__close" type="button">
                     <svg class="advdominion-lg__close-icon"><use href="${options.icons.close}" /></svg>
                 </button>
-                <div class="advdominion-lg__container swiper-container">
+                <div class="advdominion-lg__container swiper">
                     <div class="advdominion-lg__wrapper swiper-wrapper">
                         ${items.join('')}
                     </div>
-                    ${options.pagination ? options.pagination : ''}
-                    ${options.navigation ? options.navigation : ''}
+                    ${options.pagination || ''}
+                    ${options.navigation || ''}
                 </div>
             </div>
         `
@@ -166,14 +168,22 @@ const init = async (items = [], options = {}, index = 0) => {
 
     const gallery = document.body.querySelector('.advdominion-lg');
 
+    gallery.querySelector('.advdominion-lg__container').style = `
+        visibility: hidden;
+    `;
+
     await show(options?.animation?.show?.duration, options?.animation?.show?.easing);
 
     const swiper = new Swiper(
         gallery.querySelector('.advdominion-lg__container'),
-        Object.assign({init: false, initialSlide: index}, options.swiper)
+        Object.assign({modules: [Navigation, Pagination], init: false, initialSlide: index}, options.swiper)
     );
 
     swiper.on('init', function () {
+        gallery.querySelector('.advdominion-lg__container').style = `
+            visibility: '';
+        `;
+
         if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
             playVideo(this.slides[this.activeIndex]);
         }

package.json

@@ -1,8 +1,8 @@
 {
     "name": "@advdominion/lightbox-gallery",
-    "version": "1.0.1",
+    "version": "2.1.0",
     "type": "module",
-    "packageManager": "yarn@3.6.0",
+    "packageManager": "yarn@4.1.1",
     "main": "index.js",
     "repository": {
         "type": "git",
@@ -13,6 +13,6 @@
         "@advdominion/get-scrollbar-width": "^1.0.0"
     },
     "peerDependencies": {
-        "swiper": "4.5.1"
+        "swiper": "^11.0.0"
     }
 }

styles.css

@@ -21,22 +21,25 @@
     width: 25px;
 }
 
-.advdominion-lg__container {
+.advdominion-lg__container.swiper {
     height: 100%;
 }
 
-.advdominion-lg__item {
+.advdominion-lg__wrapper.swiper-wrapper {
+}
+
+.advdominion-lg__item.swiper-slide {
     align-items: center;
     display: flex;
     justify-content: center;
-    padding: 50px 55px;
 }
 
-.advdominion-lg__item_video {
+.advdominion-lg__item_video.swiper-slide {
 }
 
 .advdominion-lg__image {
     max-height: 100%;
+    max-width: 100%;
 }
 
 .advdominion-lg__video-wrapper {

yarn.lock

@@ -2,22 +2,22 @@
 # Manual changes might be lost - proceed with caution!
 
 __metadata:
-  version: 6
-  cacheKey: 8
-
-"@advdominion/gallery@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "@advdominion/gallery@workspace:."
-  dependencies:
-    "@advdominion/get-scrollbar-width": ^1.0.0
-  peerDependencies:
-    swiper: 4.5.1
-  languageName: unknown
-  linkType: soft
+  version: 8
+  cacheKey: 10
 
 "@advdominion/get-scrollbar-width@npm:^1.0.0":
   version: 1.0.0
   resolution: "@advdominion/get-scrollbar-width@npm:1.0.0"
-  checksum: 8e97af1f7e221e5ceb0676a5bd8fb3654a9bf5b2e514a5ff7ed7793f7f4b0da50e2245363698c1a45af9a5354260e019a74f891acebacfaa3b7babf680a4faa2
+  checksum: 10/8e97af1f7e221e5ceb0676a5bd8fb3654a9bf5b2e514a5ff7ed7793f7f4b0da50e2245363698c1a45af9a5354260e019a74f891acebacfaa3b7babf680a4faa2
   languageName: node
   linkType: hard
+
+"@advdominion/lightbox-gallery@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "@advdominion/lightbox-gallery@workspace:."
+  dependencies:
+    "@advdominion/get-scrollbar-width": "npm:^1.0.0"
+  peerDependencies:
+    swiper: ^10.2.0
+  languageName: unknown
+  linkType: soft