[dantothefuture]

Hi!

I’m using Sage v9.0.1 from Roots team and Serious Slider v1.1.1 doesn’t seem to work correctly with it. Everything renders perfectly, but the navigation controls (both prev/next buttons and bullets) just won’t work. In addition to that, the plugin disables Bootstrap’s .nav-tabs and possibly some other elements. If you have some spare time, you can reproduce this just by adding a demo slider anywhere in the fresh Sage installation.

From what I’ve found, it’s 2 things:

1. bsTransitionEnd seems to be used by Bootstrap 4 as well (hence the prefix, I guess), which causes weird side effects like disabling .nav-tabs. Changing it to seriousTransitionEnd worked for me:

/resources/slider.js:57
- $(this).one('bsTransitionEnd', function () { called = true })
+ $(this).one('seriousTransitionEnd', function () { called = true })

/resources/slider.js:68
- $.event.special.bsTransitionEnd = {
+ $.event.special.seriousTransitionEnd = {

/resources/slider.js:231
- .one('bsTransitionEnd', function () {
+ .one('seriousTransitionEnd', function () {

2. I don’t know why exactly, but this fixes the original condition, which didn’t work in my case – data was an object, but $this.data(...) still needed to be called for the slider to work:

/resources/slider.js:265
- if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
+ if (!data || !data.$element) $this.data('bs.carousel', (data = new Carousel(this, options)))

After that the plugin works fine and all the side effects are gone. If you need more info – feel free to contact me any time.

Regards,
Dan

[Author]

Posts