blaze-slider / blaze-slider

The Fastest slider library for high performance websites

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

Rank	Library	Time	Speed	Layout Shift Fixable?
1	Blaze ⚡️	1.4ms	1x	Yes
2	Keen	6.3ms	4.5x slower	Yes - Manually*
3	Embla	7.5ms	5.3x slower	Yes - Manually*
4	Glide	10.0ms	7.14x slower	Yes - Manually*
5	Flickity	12.3ms	8.78x slower	Yes - Manually*
6	Swiper	28.3ms	20.2x slower	Yes - Manually*
7	Slick	49.29ms	35.2x slower	Yes - 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:

• Getting Started
• Installation
• Tutorial
• API Reference

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:

• React - react-blaze-slider

License

Blaze-slider is MIT licensed.

blaze-slider's Issues

Adjust height for each slide

Is there a way to adjust the height for each slide depending on content?

When I target .blaze-track in a CSS file, I can change the height, but all the slides are the same height.
I also tried targeting each slide div with different heights, but it doesn't work.

I'm trying to implement this in React. Having a height auto feature for each individual slide would help.

When swiping horizontally, vertical scrolling should be prevented

onSlide event is not firing when loop set to false

Auto height possible?

It is possible to have the slider resize it's height with slides that have less height?

Free mode and free snap mode

Great lib btw, not sure if this has it, but if possible, could you add free mode and free snap mode? Here are some examples on keen-slider.

Free mode:
https://codesandbox.io/s/github/rcbyr/keen-slider-sandboxes/tree/v6/basic/free-mode/javascript?file=/index.html

Free snap mode:
https://codesandbox.io/s/github/rcbyr/keen-slider-sandboxes/tree/v6/basic/free-snap-mode/javascript?file=/index.html

Horizontal Overflow when with images and content

Loving the slider so far. I have added some images along with content for each slide and the issue I am facing is when the device width goes below 600px I am seeing horizontal scrollbar and slide image and content overflow. I have created a CodePen to show what I have so far.

CodePen Link

Any tip how to avoid this.
Thanks and Appreciate it

defaultConfig Rows

Is there a config setting for the number of rows like slick min has? If not, how would I configure blaze slider to do the same? I am migrating over from slick min

Slides Disappear

If you slide way past the first or last slide, it never comes back. I tested it locally and on your website. It doesn't matter if loop is true or false. Im using chrome.

Test

blaze slider not updating dynamically when props changes

I am using blaze slider in react. I need to display dynamic sliders based on button clicks.
I tried below approach but it just says below message

slidesToShow can not be larger than number of slides. Setting slidesToShow = totalSlides instead.

https://codesandbox.io/s/react-blaze-slider-forked-gm63ds?file=/src/App.jsx

Unable to start dev server

Hello there. I'd like to know how to start dev server for development of this package. Running dev script gives error written below. Thanks in advance.

npm ERR! No workspaces found:
npm ERR!   --workspace=fixtures/blaze-slider-test

Potential memory leaks(events) when plugin destroyed

Hello! Thanks for the great slider plugin!

I ran into possible memory leaks using the plugin inside NuxtJS framework. When DOM mounted, I initialize the plugin
In the lifecycle hook, when the component is destroyed (leaving to another page), I am trying to run the BlazeInstance.destroy() method. In the code, I see window events that are attached, but not removed inside destroy method.

• start page with BazeSlider
  
• moved to another page without a slider BlazeSlider (the listener stayed)
  
• went back to slider page(the number of listeners has increased)
  

Prevent click events from slider item if the user is only dragging

I have a slider with clickable items, when i try to drag the slider the click event is triggered immediately, can you please fix it ?

Can this support thumbnails?

Common feature for ecommerce would be for thumbnails. Wondering if this is supported

Feature request: Make small part of prev/next slide visible

Like this example from Airbnb:

Limit Pagination buttons

Hi All,
I was checking out the settings.
But is it possible to limit the pagination buttons.

Even if there is a large number of slides, that is still shows for example 5 buttons max.

Thanks in advance!

Added embla carousel and keen slider to benchmark test

Hiya! I just added embla carousel and keen slider to bench mark test as I came across a comment on Reddit saying some people want to see the comparison of blaze slider and embla carousel. I just added keen slider for fun. Hope my PR helps!
#6

[Bug] `module is not defined in ES module scope`

I'm trying to follow the basic setup from the docs on my Sveltekit site, and I get the following error:

module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'D:\Code\Svelte\typesafe-i18n-demo-sveltekit\node_modules\blaze-slider\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

Researching about the issue, I found some docs and it seems that blaze-slider has some issues in its packaging.

Does this support slider thumbs?

I've seen a previous issue talking about this, but the solution you gave is not optimal, I want to be able to click on the thumbs, to drag them like in the slider, and when dragging occurs update the slider and vice-versa, breakpoints feature, and also the option for it to be infinite, is this possible?

Prevent vertical scrolling when actively dragging the slider

When scrolling horizontally, vertical scrolling is disabled. But when scrolling vertically, horizontal is still possible. This leads to some weird scroll behavior on mobile devices as it can be seen in the video below.

Also, when doing this you get following error in console:
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

I first demonstrate the vertical scroll locking and afterwards the possible bug:

screen-capture.webm

Events

Hello
does the slider object emit some events ? i need to handle things outside the slider and i absolutely needs an "indexchange" listener.

Detect current slide or start/end to enable/disable navigation

Hello,

I'm currently using keen-slider at work.

Just seen Blaze and looks incredibly promising.

I do not see, however, a way to track current slides shown, or track start/end. If this were implemented, I'd test it to replace Keen.

I'd be willing to contribute to the library since there are not that many good options and it's a very important feature in my work. Any tips to start helping you?

Thanks!

Missing {"type": "module"} to package.json

You are publishing a module but not declaring it as such in package.json which makes it impossible to use (e.g. SSR)

https://codesandbox.io/s/friendly-merkle-kc1f6i?file=/index.mjs

Wrong class in tutorial

On the setup page under pagination the class in the code example is wrong it says "pagination" instead of "blaze-pagination" - took me a little while to figure out why the pagination wasn't working for me.
https://blaze-slider.dev/docs/Tutorial/setup

Request to add TinySwiper to comparison list

I have used TinySwiper in my last project, probably one of the better features and <5K gzipped filesize.

https://tiny-swiper.js.org/

[Feat] Methods to manage sliders

Blaze is the perfect solution, but compared to other sliders, there is no way to manage sliders. For example:

• slideToIdx(slideIdx)
• on (event)

Also option to set active slide class and fade transition. In my opinion, this will increase the popularity of this library

Context window persists dragging

I looked at the implementation only briefly, but it's likely related to the context menu triggering the pointer event.

https://codesandbox.io/s/blaze-slider-playground-ps0b9u

Screen.Recording.2022-07-15.at.10.17.11.PM.mov

[FEAT] Slides class names and transition methods

I noticed that when working with sliders, I often need to catch a slide with CSS or JS. For example active slide, next slide, prev slide.

Also, it often needs methods that another slider provides, e.g. "slideChangeTransitionEnd, slideChangeTransitionStart, slideNextTransitionEnd, slideNextTransitionStart". I think that many developers who are looking for a slider also need such options.

module is not defined in ES module scope

This file is being treated as an ES module because it has a '.js' file extension and '/Users/.../node_modules/blaze-slider/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

It seems your package is not config correctly with the commonjs. When using tools like Vitejs, in dev mode --> Default read commonjs mode, in production build just read ESM.

You should remove the type = module in your package.json to guarantee all tools work correctly.

"type": "module",
"name": "blaze-slider",

Feature request: Support for "fade" transition (when only 1 slide is shown)

Showing a slide and a half and centering when sliding through

Kind of like center mode in Slick and how it looks like in Flickity

Just wondering if this is a possibility!

Use passive listener to improve scroll performance

When running PageSpeed over a site containing Blaze Slider, it complains about missing passive listeneres to improve scroll performance, e.g.:

https://pagespeed.web.dev/report?url=https%3A%2F%2Fblaze-slider.dev%2F

Is it possible to use {passive:true} for appropriate click- & point-listeners?

Slide callback?

Is there anyway to detect via callback when Blaze has moved to the next slide, either via user action or when it's set to auto-play through them?

This would be really useful for lazily loading images or dynamically loading in content.

Not working for node v12.22.12

Unfortunately on my work we're using node 12.22.12 and i can't do anything with it.
Now I'm getting SyntaxError: Unexpected token '.'

I guess, it's because of this.paginationButtons?.forEach syntax, witch is not supported by node v12.x

Can you fix it, please 🙏

Ability to lazyload images in the slider

Requesting the ability to lazyload slider images similar to Flickity's lazyload ability:
https://flickity.metafizzy.co/options.html#lazyload

Possible use case for an update function that tracks dynamic children content changes

Suggesting a possible use case for an update function that checks for children length within blaze-track. Still a junior in regard to react but had an issue whereby populating the children with a dynamic content will result in the slider css not applying on render once data is being fetched through an API.

{data?.map((data) =>
    <div key={data.id}>
        {data.name}
    </div>
))}

Problem and Conditions

• Using react query to pre-fetch data on server side
• Once loading is complete, map over it to create children divs to populate the slides

Current solution implementation

• Shifted blaze slider to its own functional component
• Once data fetching is complete, send data through props to the created component housing blaze slider

{!isLoading && <BlazeSlider data={data} /> 

Edit

On second thought it might add unnecessary weight to the library since being fast and lightweight is the whole point. Might be a better option to just add it to the docs for clarification in the event someone else is facing the same issue and not finding a solution online.

Continue auto play after interaction with "StopAutoplayOnInteraction" (React).

I use StopAutoplayOnInteraction:true option, but I wanna to continue auto play after interaction. How I can do that?

Resize/Update?

Is there any way to make the slide resize/update?

Differentiate between drag and click events

Currently you can not reliably add add a click event to the slides as it detects it as a grab event. You should be able to differentiate between click and grab by calculating the delta: https://stackoverflow.com/a/59741870

Your Website is Down

Hey,

unfortunately your website where the documentation lives, is down. https://blaze-slider.dev/
Hope this gets fixed soon.

Greetings
Simon

Programmatically jump to slide

Would it be possible to provide the functionality to jump to a slide with a callback or something?

[FEAT] Vertical Slides.

This seems to be a very lean replacement for other JavaScript swiper modules. However, there's a feature missing.

Can you please add a vertical slider, so you can swipe on the Y axis instead on the X axis?

slide order glitch

We're seeing some issue on mobile when dragging the slider intermittently the slides end up out of their original order.

At around 4 seconds in dragging to previous slide jumps two slides, and slide 1 is sent to the end of the list and slide 2 becomes slide 1.

Upload.from.GitHub.for.iOS.MOV

https://383hhjb8piaeifwj-62197366962.shopifypreview.com

Swiping quickly on mobile cause stuttering

Device: iPhone 12 Mini
Browser: Tested on Safari and Chrome

Blaze Slider issue - Carousel resets to previous position (+1) after dragging

Description:
I'm experiencing an issue with the Blaze Slider library. When I drag the slider, I can move it to any position I want, but as soon as I release the mouse button (on desktop) or remove my finger from the screen (on mobile), the carousel resets to a position where it only advanced by one slide. This makes it impossible to select a specific slide or to move the carousel smoothly.

Steps to reproduce:

Open the Blaze Slider example page (or use it in your own code)
Try to drag the slider to a specific position
Release the mouse button or remove your finger from the screen
Notice that the carousel resets to a position where it only advanced by one slide.
Expected behavior:
After dragging the slider, the carousel should stay in the position where it was released, allowing the user to select a specific slide or to move it smoothly.

Actual behavior:
The carousel resets to a position where it only advanced by one slide, making it difficult to use.

Environment:

Blaze Slider version: 1.9.1
Browser: Chrome (desktop and android)
Operating system: Linux mint
Thanks for your help in addressing this issue!

Has anyone managed to get it working with Nuxt?

Would love to use this repo in my Nuxt package, however I keep bumping into the following error
Does anyone know what's going on? Thanks!

Module parse failed: Unexpected token (559:31)                                                     friendly-errors 08:23:26
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         this.stopAutoplay();
|         // remove pagination buttons
>         this.paginationButtons?.forEach((button) => button.remove());
|         // remove classes
|         this.el.classList.remove('static');
                                                                                                   friendly-errors 08:23:26
 @ ./plugins/blaze-slider.js 1:0-39
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

[FEAT] Allow slide on scroll

Great project! Please add sliding on scrolling.

[Feat] onChange or Slide change listener

Can we have a method for listening change in slider? so that we can add some custom actions depends on slide index.

Because right now I am trying to add similar to adaptive layers logic like in slick, but unfortunately there are no listeners for me to see slide change

Another example could be:
changing a text or image in another component, or adding a custom CSS depending on the slide index.

Possible solution could be adding a callback method like change/changed to isTransitioning function

Swipe Issue on MacOS Safari/iOS Safari

I've noticed 2 separate issues on MacOS Safari and iOS Safari that may be related:

MacOS Safari
(See attached video) I've noticed when trying to swipe in mobile viewport on MacOS it has an issue with images and tries to drag on the image itself which causes the slides to break.

Screen.Recording.2022-11-08.at.11.05.38.mov

Config

document.querySelectorAll('.blaze-slider').forEach(el => {
  new BlazeSlider(el, {
    all: {
      slidesToScroll: 1,
      slidesToShow: 1,
      loop: true,
      enablePagination: true,
      slideGap: '0px',
      draggable: true
    }
  });
})

Markup

<div class="blaze-slider block md:hidden relative pb-12">
        <div class="blaze-container">
          <div class="blaze-track-container">
            <div class="blaze-track">
              {%- for media in product.media -%}
                    <img
                      srcset="{% if media.preview_image.width >= 288 %}{{ media.preview_image | image_url: width: 288 }} 288w,{% endif %}
                              {% if media.preview_image.width >= 576 %}{{ media.preview_image | image_url: width: 576 }} 576w,{% endif %}
                              {% if media.preview_image.width >= 550 %}{{ media.preview_image | image_url: width: 550 }} 550w,{% endif %}
                              {% if media.preview_image.width >= 1100 %}{{ media.preview_image | image_url: width: 1100 }} 1100w,{% endif %}
                              {{ media.preview_image | image_url }} {{ media.preview_image.width }}w"
                      src="{{ media | image_url: width: 550, height: 550 }}"
                      sizes="(min-width: 1200px) calc((1200px - 10rem) / 2), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
                      width="576"
                      height="{{ 576 | divided_by: media.preview_image.aspect_ratio }}"
                      alt="{{ media.preview_image.alt | escape }}"
                    >
           {%- endfor -%}
            </div>
            {%- if product.media.size > 1 -%}
              <div class="blaze-pagination absolute -translate-x-1/2 left-[50%] top-[97%] bg-brand-pink rounded-xl p-2 flex items-center justify-center">
              </div>
            {%- endif -%}
          </div>
      
          {%- if product.media.size > 1 -%}
            <button type="button" class="absolute z-10 left-4 top-1/2 blaze-prev block" name="previous" aria-label="Previous Slide">{% render 'arrow-left' %}</button>
            <button type="button" class="absolute z-10 right-8 top-1/2 blaze-next block" name="next" aria-label="Next Slide">{% render 'arrow-right' %}</button>
          {%- endif -%}
        </div>
      </div>

Transition Stutters in some mobile devices

Some users have reported that transition stutters in iOS safari and on some android devices