npm package: @goldencomm/alpine-plugin-swiper
Description: Install the plugin from npm:
Latest version: 2.0.0

# @goldencomm/alpine-plugin-swiper

## Installation

Install the plugin from npm:

```bash
npm install @goldencomm/alpine-plugin-swiper
```

Import it into your bundle alongside Swiper and Alpine, and register it with `Alpine.plugin()`:

```js
import Alpine from "alpinejs";
import swiper from "@goldencomm/alpine-plugin-swiper";

/* Swiper Core */
import Swiper from "swiper";
import "swiper/css";
// OR import through your CSS file:
// @import 'swiper/swiper';

/* (Optional) Customize your defaults. */
Swiper.extendDefaults({
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  pagination: {
    clickable: true,
    el: ".swiper-pagination",
  },
});

/* (Optional) Swiper Modules */
import { Navigation, Pagination } from "swiper/modules";
Swiper.use([Navigation, Pagination]);

import "swiper/css/navigation";
import "swiper/css/pagination";
// OR import through your CSS file:
// @import 'swiper/modules/navigation';
// @import 'swiper/modules/pagination';

/* Register plugin - Passing Swiper is required. */
Alpine.plugin(swiper(Swiper));

Alpine.start();
```

## Usage

Basic usage:

```html
<div class="swiper" x-data x-swiper>
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
      <img src="https://dummyimage.com/1920x1080" />
    </div>
    <div class="swiper-slide">
      <img src="https://dummyimage.com/1920x1080" />
    </div>
    <div class="swiper-slide">
      <img src="https://dummyimage.com/1920x1080" />
    </div>
  </div>
</div>
```

Providing options to Swiper:

```html
<div
  class="swiper"
  x-data
  x-swiper="{
    pagination: {
      enabled: true,
    },
    navigation: {
      enabled: true,
    },
  }"
>
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
      <img src="https://dummyimage.com/1920x1080" />
    </div>
    <div class="swiper-slide">
      <img src="https://dummyimage.com/1920x1080" />
    </div>
    <div class="swiper-slide">
      <img src="https://dummyimage.com/1920x1080" />
    </div>
  </div>

  <!-- Pagination -->
  <div class="swiper-pagination"></div>

  <!-- Navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
```

The `$swiper` "magic" gives you access all the methods and properties on the [Swiper instance](https://swiperjs.com/swiper-api#methods--properties).

```html
<div
  class="swiper"
  x-data
  x-swiper="{
    pagination: {
      enabled: true,
    },
    navigation: {
      enabled: true,
    },
  }"
>
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
      <img src="https://dummyimage.com/1920x1080" />
    </div>
    <div class="swiper-slide">
      <img src="https://dummyimage.com/1920x1080" />
    </div>
    <div class="swiper-slide">
      <img src="https://dummyimage.com/1920x1080" />
    </div>
  </div>

  <!-- Custom navigation buttons -->
  <button x-on:click="$swiper.slidePrev()">Previous</button>
  <button x-on:click="$swiper.slideNext()">Next</button>
</div>
```