Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

blaze-slider

Package Overview
Dependencies
Maintainers
1
Versions
44
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

blaze-slider

Blazing Fast Slider For High Performance Web

  • 1.9.3
  • latest
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Blaze Slider

⚡️ blaze-slider.dev

Blaze slider is a high-performance JavaScript UI library for creating sliders.

The Problem

Existing slider libraries are not designed with performance in mind. They block the main thread for a long time when initializing a slider which results in poor UX and poor FID metric for your website.

They also create layout shifts that negatively impact the UX and CLS metric of your website. These libraries don't provide any idiomatic way to reduce the layout shifts.

The Solution

Blaze slider is built to fix these issues. It can initialize the slider incredibly fast. It initializes the slider 30x faster than the Slick slider, and 15x faster than the Swiper slider.

Blaze Slider allows you to specify the layout configuration via CSS variables which enable slider initialization with zero layout shifts! - so that your slider will look exactly the same before and after javascript runs.

Benchmark

RankLibraryTimeSpeedLayout Shift Fixable?
1Blaze ⚡️1.4ms1xYes
2Keen6.3ms4.5x slowerYes - Manually*
3Embla7.5ms5.3x slowerYes - Manually*
4Glide10.0ms7.14x slowerYes - Manually*
5Flickity12.3ms8.78x slowerYes - Manually*
6Swiper28.3ms20.2x slowerYes - Manually*
7Slick49.29ms35.2x slowerYes - Manually*

Manually* means that the slider library itself does not provide an idiomatic way to fix the layout shift. You have to manually add CSS to fix the layout shifts



Benchmark measures the time taken to create a slider with 10 slides by each slider. Benchmark is measured on Apple M1 Pro CPU with 6X slowdown on Google Chrome 103. The Average of 20 runs is taken.

See Benchmark Repo to see how these libraries are tested


Highlights

  • Fastest Slider Library
  • Packed with Features
  • Zero Layout Shifts
  • Full TypeScript support
  • CSS Media-Query-based Responsive configuration
  • No slide cloning
  • Extremely small bundle size (2kB)

Documentation

You can check out the documentation on the website blaze-slider.dev

The documentation is divided into several sections:


Framework Integrations

Blaze Slider is framework agnostic - it can work with all frameworks, all it requires is the DOM element on which you want to initialize the slider and configuration object. Learn More

Here are some prebuilt integrations:

License

Blaze-slider is MIT licensed.

Keywords

FAQs

Package last updated on 23 Apr 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc