Doesn't work with Sage (Bootstrap 4 theme) – solution

  • Author
  • #65715


    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:

    - $(this).one('bsTransitionEnd', function () { called = true })
    + $(this).one('seriousTransitionEnd', function () { called = true })
    - $.event.special.bsTransitionEnd = {
    + $.event.special.seriousTransitionEnd = {
    - .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 $ still needed to be called for the slider to work:

    - if (!data) $'bs.carousel', (data = new Carousel(this, options)))
    + if (!data || !data.$element) $'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.


Viewing 1 post (of 1 total)

The topic ‘Doesn't work with Sage (Bootstrap 4 theme) – solution’ is closed to new replies.