chore: cleaning up lazysizes and swiper configs (#751)

* fixing swiper in vanilla js, removing lazysizes

* fixing init in swiperOptions

* changeset

* updating comment

* fixing path to adjacent file

Author: stephiescastle

.changeset/bright-peaches-tan.md

@@ -0,0 +1,7 @@
+---
+"@explorer-1/common": patch
+"@explorer-1/html": patch
+"@nasa-jpl/explorer-1": patch
+---
+
+Cleaning up dependencies, fixing swiperOptions for vanilla JS

packages/common/package.json

@@ -17,9 +17,9 @@
   },
   "dependencies": {
     "@fancyapps/ui": "^4.0.26",
-    "lazysizes": "^5.3.0",
-    "tailwindcss": "^3.4.3",
     "@tailwindcss/forms": "^0.5.7",
+    "swiper": "^11.1.3",
+    "tailwindcss": "^3.4.3",
     "tailwindcss-themer": "^4.0.0"
   },
   "devDependencies": {

packages/common/src/js/scripts.js

@@ -1,5 +1,4 @@
 import '@fancyapps/ui'
-import 'lazysizes'
 import { initMixinCarousel, initBlockImageCarousel } from './vendors/_swiper.js'
 import initBlockAccordion from './components/_BlockAccordion.js'
 import initBackToTop from './components/_BackToTop.js'

packages/common/src/js/vendors/_swiper.js

@@ -1,21 +1,22 @@
 /* Swiper
- *  Configured to use any modules that are needed site-wide (SwiperCore.use([]))
- *  Custom options are defined in constants
+ * Configured to use any modules that are needed site-wide (Swiper.use([]))
+ * Custom options are defined in constants
  */
 import Swiper from 'swiper'
 import { A11y, Navigation, Pagination } from 'swiper/modules'
 import swiperOptions from './_swiperOptions.js'
 
+// Register modules globally
+Swiper.use([A11y, Navigation, Pagination])
+
 export function initMixinCarousel() {
   return new Swiper('.MixinCarousel .swiper', {
-    modules: [A11y, Navigation, Pagination],
     ...swiperOptions.MixinCarousel
-  }).init()
+  })
 }
 
 export function initBlockImageCarousel() {
   return new Swiper('.BlockImageCarousel .swiper', {
-    modules: [A11y, Navigation, Pagination],
     ...swiperOptions.BlockImageCarousel
   })
 }

packages/common/src/js/vendors/_swiperOptions.js

@@ -4,7 +4,6 @@
 
 const swiperOptions = {
   MixinCarousel: {
-    init: false,
     slidesPerView: 1.25,
     speed: 500,
     threshold: 20, // swipe threshold in px

packages/html/index.html

@@ -40,7 +40,6 @@
     "@explorer-1/common": "workspace:*",
     "@explorer-1/prettier-config": "workspace:*",
     "autoprefixer": "^10.4.19",
-    "lazysizes": "^5.3.0",
     "postcss-import": "^16.1.0",
     "typescript": "^5.4.5",
     "vite": "^5.3.1"

packages/html/package.json

@@ -1,4 +1,3 @@
-import 'lazysizes'
 export const BaseImageTemplate = ({
   src,
   srcset,