📦 swipescroll

✅ Fully supported in modern browsers / Totalmente compatible en navegadores modernos
⚠️ Use UMD bundle for legacy browsers / Usar bundle UMD para navegadores antiguos

🇺🇸 This README includes:

• npm/yarn installation
• Clear usage examples for all frameworks (Vanilla JS, React ≥16.8, Vue ≥3, Angular ≥12)
• Full compatibility with IE11 and older browsers using the UMD build

🇪🇸 Este README incluye:

• Instalación con npm/yarn
• Ejemplos claros para todos los frameworks (JS puro, React ≥16.8, Vue ≥3, Angular ≥12)
• Compatibilidad total con IE11 y navegadores antiguos usando el build UMD

🚀 Installation | Instalación

npm install swipescroll

yarn add swipescroll

📥 Usage Examples | Ejemplos de uso

🔹 Vanilla JS (Modern Browsers)

<div class="carousel">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<script type="module">
  import { initCarouselScroll } from "swipescroll";
  const carousel = document.querySelector(".carousel");
  initCarouselScroll(carousel);
</script>

🔹 Vanilla JS (Legacy Browsers: IE11, etc.)

<!-- Load from CDN -->
<script src="https://unpkg.com/swipescroll/umd"></script>

<script>
  // Available globally as swipescroll
  DriftScroll.initCarouselScroll(document.querySelector(".carousel"));
</script>

🔹 React (≥16.8)

import React, { useRef } from "react";
import { initCarouselScroll } from "swipescroll";

export default function App() {
  const ref = useRef();
  initCarouselScroll(ref);

  return (
    <div ref={ref} className="carousel">
      <div>React 1</div>
      <div>React 2</div>
      <div>React 3</div>
    </div>
  );
}

🔹 Angular (≥12)

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { initCarouselScroll } from 'swipescroll';

@Component({
  selector: 'app-carousel',
  template: `
    <div #carousel class="carousel">
      <div>Angular 1</div>
      <div>Angular 2</div>
      <div>Angular 3</div>
    </div>
  `
})
export class CarouselComponent implements AfterViewInit {
  @ViewChild('carousel') carousel!: ElementRef;

  ngAfterViewInit() {
    initCarouselScroll(this.carousel.nativeElement);
  }
}

🔹 Angular (Legacy Browsers: IE11)

<script src="https://unpkg.com/swipescroll/umd"></script>
<script>
  const element = document.querySelector('.carousel');
  swipescroll.initCarouselScroll(element);
</script>

🔹 Vue ≥3

<template>
  <div ref="carousel" class="carousel">
    <div>Vue 1</div>
    <div>Vue 2</div>
    <div>Vue 3</div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { initCarouselScrolll } from "swipescroll";

const carousel = ref(null);
initCarouselScrolll(carousel);
</script>

🌐 Browser Compatibility | Compatibilidad de Navegadores

| Browser / Navegador | Compatibility / Compatibilidad | | -------------------------- | ----------------------------------------- | | Chrome (Desktop & Mobile) | ✅ | | Firefox (Desktop & Mobile) | ✅ | | Safari (Desktop & iOS) | ✅ | | Edge Chromium | ✅ | | Opera | ✅ | | IE11 | ✅ Using UMD + Babel / Usando UMD + Babel | | Edge Legacy (pre-Chromium) | ✅ Using UMD + Babel / Usando UMD + Babel |

✅ Fully supported in modern browsers / Totalmente compatible en navegadores modernos
⚠️ Use UMD bundle for legacy browsers / Usar bundle UMD para navegadores antiguos