pehaa/beerslider

A vanilla JS keyboard accessible plugin for any before-after comparison

beerslider's Issues

An "end" option would be great

Everything is in the title :)

Thank you for your work!

beer-handle colors

Hi there... I've been searching for a good responsive and accessible before/after slider for quite a while, and beer slider is the best I've seen! It is so close to being exactly what I want... so of course, I have a couple of feature requests. 😀

Could you provide an option to override the default beer-handle colors when instantiating a new beer slider? The ability to set the initial color, and to set a different color for focus would be ideal.

Also, the ability to change color when hovered would be awesome. This could be the same as the focus color, or a variation of it (perhaps the same shade but lower opacity).

Two reasons for this request:

1. For some images (winter photos, or any other image with white/light background), the default white gets a bit lost.
2. Interface consistency... beer slider could be used in applications that require certain colors/transitions for non-focused, focused, and hovered states.

Thank you!

Doesnt work on mobile safari

Both the slider I have set up (using this) and the slider on the pepsized.com demo break as soon as you go to move the slider. They move the slider 100% to the left and don't let you move it at all.

picture tag

is it possible to add picture tag?

Thanks

slider dividing line option

Could you possibly add an option to show a dividing line of some kind, and the ability to specify its color and/or style? Many before/after sliders I've seen include by default (with no ability to disable) a white or gray bar, or a thin black line (or even a double black line).

Beer slider currently relies on differences between the two photos to show where the dividing line is. I get why that is given why you developed it (to showcase photo filters), but in many cases, the difference between the two photos may not be enough to show a distinction from top to bottom.

Use case: the before/after could be essentially identical except for some relatively small or localized changes (e.g., something added, removed, or changed).

Thanks!

start property is not working properly for 0 (zero)

I have tried to start beer-handle from 0, but it becomes default 50%. Then I gave -1 to the value of start and it worked.

Not enough information

Where are all the options list?
Is there a list or is the only option is to search inside the JS file?
is there a vertical option?
can we use div wrappers which also contains text etc or only images?

Feature request: Crop image to fit aspect ratio?

What if I had the ability to crop either one of the before-after images such that the before-after comparison would be smoother?

Without click

I don't want to force the user to click, exists an option to always go to the cursor without clicking?

Gatsby.js | WebpackError: ReferenceError: window is not defined

I used beerslider in react, and tested in production, it worked really well!

But the same approach does not succeed when building my code using beerslider in Gatsby.js (server-side rendering/site generator).

The problem is: "window" is not available during server-side rendering.

Maybe could you give the CDN or .js that supports server-side rendering?
Thanks.

slide without mouseclick

Hi, i try your sliderjs out but i'm curious if it is possible to slide without a mouse click so that it move on a mousemove.

Please help, i cannot find it out how.

Incorrect zoom on page load

This is weird, on page load the left image is improperly zoomed.

However, when the page is resized at all it immediately fixes itself (no refresh needed).

I installed Beer Slider via npm and am loading it in my app.js file like so

let BeerSlider = require('beerslider');

new BeerSlider(document.getElementById('beer-slider'));

and my markup

<div id="beer-slider" class="beer-slider rounded-lg shadow-lg mb-6" data-beer-label="Dark">
    <img src="images/screenshot-dark.png" alt="Directory Lister - Dark Theme">

    <div class="beer-reveal" data-beer-label="Light">
        <img src="images/screenshot-light.png" alt="Directory Lister - Light Theme">
    </div>
</div>

Problems with handle on Iphone 6s

Plugin works very weird, sometimes it won't drag handle on iphone safari

Maybe we want just click hook

I'm sorry. I can't speak english well.

I use this library to make our web site's main page.
It's working well. nice library.
But It's enable just slide.
I want just click event handling.
Maybe add option to constructor ..

e.g.,
click: function(e) { /*business logic. */ }`

Thanks.

picture tag support

Hi, thanks for the plugin!
please add picture tag support

Vertical Slider

Improvement to allow comparison along vertical axis.

Missing destroy method

Hi,

beerslider should expose a destroy method that removes everything it sets in the constructor...

BeerSlider.js doesn't work in Safari.

Since it does not work in Safari it also does not work in Ipads and iphones.

It does not work properly on mobile devices

Hello

I have a problem on mobile devices beer slider does not work properly when I want to move the range then it moves to the left and I can't do anything.

On mozlilla firefox also when the page first loads it doesn't work at all only after refreshing the page it works correctly. On google chrome from the first loading it works correctly.

Site: https://rtmmalowaniedachow.pl/