astro-swiper 2.6.1 → 2.7.1

package/README.md

@@ -1,6 +1,6 @@
 <div align="center" style="background-color: dark-grey; padding: 1rem;">
   <a href="https://swiperjs.com" target="_blank"><img width="70" width="auto" src="images/swiper-logo.svg"></a>
-  <a href="https://astro.build/" target="_blank"><img height="68" width="auto" src="images/astro-logo.svg"></a>
+  <a href="https://astro.build/" target="_blank"><img height="68" width="auto" src="images/astro-logo.png"></a>
 
   # Astro Swiper
 
@@ -200,6 +200,38 @@ Swiper types are available importing types from `astro-swiper/swiper`, such as
 import type { PaginationOptions } from 'astro-swiper/swiper';
 ```
 
+## Troubleshooting
+
+### Import declaration conflict
+
+On the following code,
+```jsx
+import { Swiper } from 'astro-swiper';
+```
+VSCode may raise the following error:
+```jsx
+Import declaration conflicts with local declaration of 'Swiper'.
+(alias) function Swiper(_props: AstroSwiperType): any
+import Swiper
+function Swiper(_props: Record<string, any>): any
+```
+
+This is because the astro file is named `Swiper.astro`.
+Renaming it in `MySwiper.astro` solves the issue.
+
+
+### Wrong AI code
+
+AI (chatgpt, gemini...) get confused when providing examples how to use `astro-swiper`.
+Common errors are:
+* missing `<SwiperWrapper>`
+* `<SwiperWrapper>` wrapping `<Swiper>` instead of `<SwiperSlide>`
+* options provided directly to `<Swiper>` instead of inside `options` variable, such as `<Swiper options={{...}}>`
+* adding `modules` in `options`. This is wrong. Modules are automatically added
+* installing `swiper` is not required
+* `import 'swiper/css';` is not required as performed by `astro-swiper`
+
+
 ## Help needed?
 
 **Do you need help to integrate `astro-swiper` in your astro template / component?**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-swiper",
-  "version": "2.6.1",
+  "version": "2.7.1",
   "description": "Astro component for swiper, dedicated to slider / carousel / photo swiper / slide, including thumbnails",
   "type": "module",
   "main": "index.js",
@@ -61,6 +61,6 @@
     "thumbnail"
   ],
   "dependencies": {
-    "swiper": "^12.1.4"
+    "swiper": "^12.2.0"
   }
 }

package/src/index.ts

@@ -11,7 +11,7 @@ export type selectorStringType = `.${string}` | `#${string}`;
  * Basically the same as the original SwiperOptions, but extended
  * with new capabilities
  */
-export interface AstroSwiperOptions extends SwiperOptions {
+export interface AstroSwiperOptions extends Omit<SwiperOptions, "modules"> {
   /** options specific to astro-swiper component */
   astro?: {
     /** intersection observer options: an observer can be added to control the swiper when it appears / disappears in the screen.
@@ -62,8 +62,7 @@ export interface AstroSwiperType extends HTMLAttributes<'div'> {
   /** add the default swiper class, true by default */
   addDefaultClass?: boolean;
 
-  /** @deprecated is not really usefull anymore. If a specific unique class or id is needed,
-   * add it as an id or or a class directly */
+  /** @deprecated is not really usefull anymore. If a specific unique class or id is needed add it as an id or or a class directly */
   uniqueClass?: string;
 
   /** @deprecated use astro.options.astro.thumbsSwiperUniqueSelector instead */