SenangWebs Frame (SWF) is a lightweight, touch-friendly JavaScript slider library that provides a modern, responsive carousel experience with smooth transitions and intuitive navigation. With minimal setup, you can transform your content into an engaging slider with support for multiple items per view, autoplay, and responsive breakpoints.

• Easy to integrate with existing projects
• Responsive slider with smooth transitions
• Support for multiple slides per view
• Configurable spacing between slides
• Touch-friendly swipe navigation
• Autoplay with customizable delay
• Infinite loop option
• Customizable via data attributes or JavaScript
• Built-in navigation controls and indicators
• Responsive breakpoints support
• No external dependencies
• Efficient performance
• Works on all modern browsers

npm install senangwebs-frame

You can include SenangWebs Frame directly in your HTML file using unpkg:

<link rel="stylesheet" href="https://unpkg.com/senangwebs-frame@latest/dist/swf.css">
<script src="https://unpkg.com/senangwebs-frame@latest/dist/swf.js"></script>

1. Include the SWF CSS and JavaScript files in your HTML:

<!-- If installed via npm -->
<link rel="stylesheet" href="path/to/swf.css">
<script src="path/to/swf.js"></script>

<!-- Or if using unpkg -->
<link rel="stylesheet" href="https://unpkg.com/senangwebs-frame@latest/dist/swf.css">
<script src="https://unpkg.com/senangwebs-frame@latest/dist/swf.js"></script>

2. Create your slider structure using data attributes:

<div data-swf>
    <div data-swf-items data-swf-autoplay="true" data-swf-infinite="true">
        <div data-swf-item>Slide 1</div>
        <div data-swf-item>Slide 2</div>
        <div data-swf-item>Slide 3</div>
    </div>
    <div data-swf-indicators></div>
    <div data-swf-controls></div>
</div>

The slider will automatically initialize when the page loads.

Configure your slider using either data attributes or JavaScript initialization:

• data-swf: Marks the container element as a slider
• data-swf-items: Container for slider items
• data-swf-item: Marks an element as a slider item
• data-swf-controls: Container for navigation arrows
• data-swf-indicators: Container for slide indicators
• data-swf-autoplay="true|false": Enable/disable autoplay
• data-swf-infinite="true|false": Enable/disable infinite loop
• data-swf-autoplay-delay="3000": Set autoplay delay in milliseconds
• data-swf-animation-speed="300": Set transition speed in milliseconds
• data-swf-start-index="0": Set initial slide index
• data-swf-responsive: Set responsive breakpoints configuration (JSON string)

const slider = new SWF(element, {
    autoplay: false,
    infinite: true,
    autoplayDelay: 3000,
    animationSpeed: 300,
    startIndex: 0,
    responsive: [
        {
            breakpoint: 1024,
            slidesPerView: 3,
            spacing: 16
        },
        {
            breakpoint: 768,
            slidesPerView: 2,
            spacing: 12
        },
        {
            breakpoint: 480,
            slidesPerView: 1,
            spacing: 8
        }
    ]
});

• Touch Controls:
  • Swipe left/right to navigate
  • Touch sensitivity with momentum scrolling
• Button Controls:
  • Previous/Next buttons
  • Indicator dots for direct slide access
• Autoplay:
  • Automatic slide progression
  • Pauses on hover/touch
  • Customizable delay

• Breakpoint-based configuration
• Adjustable slides per view
• Configurable spacing between slides
• Smooth transitions between breakpoints

The slider emits a swf:change event when slides change, providing the current index and slide element:

slider.container.addEventListener('swf:change', (e) => {
    console.log('Current slide:', e.detail.index);
    console.log('Slide element:', e.detail.slide);
});

SenangWebs Frame works on all modern browsers, including:

• Chrome
• Firefox
• Safari
• Edge
• Opera

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the MIT License - see the LICENSE.md file for details.

• Thanks to all contributors who have helped improve this library

If you encounter any issues or have questions, please file an issue on the GitHub repository.