Swiper Slider

Adds Swiper (v14), the most modern mobile touch slider with hardware-accelerated transitions. Library-agnostic, modular, and framework-compatible for Next.js applications. Supports React components via swiper/react.

Copy the files below, or open this folder on GitHub. Each file is stamped with a limited-use licence, generator and date. SHA-256 is of the published catalog bytes, before the stamp.

id: swiper
stack: Next.js
version: 1.0.0
compatibility: nextjs >=16 <17 · react >=19 <20
requires: nextjs-base
env vars: —

Verified passing · daily buildIntegrity sha256:d9dea30a9c881fc3…

Files (2)

lib/swiper.ts · sha256:d9dea30a9c881fc3…

// Licensed by BotKelp — https://www.botkelp.com

/**
 * Swiper configuration utilities.
 * 
 * This module exports Swiper configuration and helper functions
 * for use in Next.js applications.
 * 
 * See: https://swiperjs.com/
 */
import Swiper from 'swiper';
import { Autoplay, Navigation, Pagination, EffectFade, EffectCreative } from 'swiper/modules';

// Import SwiperOptions type
import type { SwiperOptions } from 'swiper/types';

// Default Swiper configuration
export const defaultSwiperOptions: SwiperOptions = {
  modules: [Autoplay, Navigation, Pagination, EffectFade, EffectCreative],
  slidesPerView: 1,
  spaceBetween: 10,
  loop: true,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
};

// Initialize Swiper with custom options
export const initSwiper = (container: HTMLElement | string, options: Partial<SwiperOptions> = {}) => {
  const mergedOptions: SwiperOptions = {
    ...defaultSwiperOptions,
    ...options,
  };
  return new Swiper(container, mergedOptions);
};

export { Swiper, SwiperOptions };
export { Autoplay, Navigation, Pagination, EffectFade, EffectCreative };