@goldencomm/alpine-plugin-swiper

Installation

Install the plugin from npm:

npm install @goldencomm/alpine-plugin-swiper

Import it into your bundle alongside Swiper and Alpine, and register it with Alpine.plugin():

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:

<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:

<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.

<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>