@goldencomm/alpine-plugin-swiper
v2.0.0TypeScript
Install the plugin from npm:
0/weekUpdated 1 months agoUnpacked: 9.4 KB
Published by brasmussen
npm install @goldencomm/alpine-plugin-swiper@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
`
Providing options to Swiper:
`html
class="swiper"
x-data
x-swiper="{
pagination: {
enabled: true,
},
navigation: {
enabled: true,
},
}"
>
`
The $swiper "magic" gives you access all the methods and properties on the Swiper instance.
`html
class="swiper"
x-data
x-swiper="{
pagination: {
enabled: true,
},
navigation: {
enabled: true,
},
}"
>
``