sg-swiper
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

sg-swiper

a lightweight typescript slides swiper.

Demo here

Installation

npm install sg-swiper

Usage

import Swiper from 'sg-swiper';

// Create a new Swiper instance
const swiperElement = document.getElementById('swiper-container');
const swiper = new Swiper(swiperElement, {
  // Optional configuration options
  // ...
});

Options

The Swiper class can be configured with the following options:

onSlideChange?: (index: number) => void Callback function triggered when the active slide changes.

auto?: number Auto-advances to the next slide at a specified interval (in milliseconds).

slideClassName?: string class name for selecting the slides.

navigation?: {next?: HTMLElement[] | null, prev?: HTMLElement[] | null} Object with previous and next navigation elements.

linkedSwipers?: (Swiper instance)[] An array of linked Swiper instances.

slideLoad?: (slide: HTMLElement) => Promise A function to load lazy-loaded slides, must return a Promise that will resolve when it's loaded.

onSlideClick?: (index: number, element: HTMLElement) => void Callback function triggered when a slide is clicked.

draggable?: boolean Enable or disable dragging slides.

slideStart?: number At init, the starting position of the slider.

Example

const swiper = new Swiper(swiperElement, {
  onSlideChange: (index) => {
    console.log(`Active slide changed to index ${index}`);
  },
  auto: 3000,
  slideClassName: 'my-slide',
  navigation: {
    prev: [prevButtonElement1, prevButtonElement2],
    next: [nextButtonElement1, nextButtonElement2],
  },
  linkedSwipers: [linkedSwiper1, linkedSwiper2],
  slideLoad: (slideElement) => {
    // Load slide content dynamically
    return new Promise(/* ... */);
  },
  onSlideClick: (index, element) => {
    console.log(`Clicked on slide ${index}`);
  },
  draggable: true,
});

Methods

start(index?: number)

Starts the swiper at the specified index.

Parameters:

  • index (optional): The index at which to start the swiper.

Example:

const swiper = new Swiper(swiperElement);
swiper.start(2); // Starts the swiper at index 2

stop()

Stops the swiper and removes all event listeners.

Example:

const swiper = new Swiper(swiperElement);
swiper.stop(); // Stops the swiper

index = index: number

setter to put the swiper at a specified index

Example:

const swiper = new Swiper(swiperElement);
swiper.index = 10;

slideClick = (index: number, element: HTMLElement) => void

setter to pass a callback function to handle a click on a slide

Example:

const swiper = new Swiper(swiperElement);
swiper.slideclick = (index, el) => { console.log('click')}; 

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.1.41latest

Version History

VersionDownloads (Last 7 Days)Published
1.1.41
1.1.30
1.1.20
1.1.10
1.1.00
1.0.91
1.0.80
1.0.70
1.0.60
1.0.50
1.0.40
1.0.30
1.0.20
1.0.10
1.0.00

Package Sidebar

Install

npm i sg-swiper

Weekly Downloads

2

Version

1.1.4

License

MIT

Unpacked Size

147 kB

Total Files

9

Last publish

Collaborators

  • gsebdev