From: Martijn Cuppens Date: Mon, 19 Feb 2018 09:10:25 +0000 (+0100) Subject: Fix carousel transition duration (#25218) X-Git-Tag: v4.1.0~104 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3dd0bde664699fc7a191d0d3569f4f0ba8f06028;p=thirdparty%2Fbootstrap.git Fix carousel transition duration (#25218) --- diff --git a/docs/4.0/components/carousel.md b/docs/4.0/components/carousel.md index 0aa132ed77..e12f83cebb 100644 --- a/docs/4.0/components/carousel.md +++ b/docs/4.0/components/carousel.md @@ -325,3 +325,7 @@ $('#myCarousel').on('slide.bs.carousel', function () { // do something… }) {% endhighlight %} + +### Change transition duration + +The transition duration of `.carousel-item` can be changed with the `$carousel-transition` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`). The transition duration must be the same for each carousel item. diff --git a/js/src/carousel.js b/js/src/carousel.js index 9d3be6f19d..4a64e7cc8f 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -15,16 +15,16 @@ const Carousel = (($) => { * ------------------------------------------------------------------------ */ - const NAME = 'carousel' - const VERSION = '4.0.0' - const DATA_KEY = 'bs.carousel' - const EVENT_KEY = `.${DATA_KEY}` - const DATA_API_KEY = '.data-api' - const JQUERY_NO_CONFLICT = $.fn[NAME] - const TRANSITION_DURATION = 600 - const ARROW_LEFT_KEYCODE = 37 // KeyboardEvent.which value for left arrow key - const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key - const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch + const NAME = 'carousel' + const VERSION = '4.0.0' + const DATA_KEY = 'bs.carousel' + const EVENT_KEY = `.${DATA_KEY}` + const DATA_API_KEY = '.data-api' + const JQUERY_NO_CONFLICT = $.fn[NAME] + const ARROW_LEFT_KEYCODE = 37 // KeyboardEvent.which value for left arrow key + const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key + const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch + const MILLISECONDS_MULTIPLIER = 1000 const Default = { interval : 5000, @@ -89,18 +89,20 @@ const Carousel = (($) => { class Carousel { constructor(element, config) { - this._items = null - this._interval = null - this._activeElement = null + this._items = null + this._interval = null + this._activeElement = null - this._isPaused = false - this._isSliding = false + this._isPaused = false + this._isSliding = false - this.touchTimeout = null + this.touchTimeout = null - this._config = this._getConfig(config) - this._element = $(element)[0] - this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0] + this._config = this._getConfig(config) + this._element = $(element)[0] + this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0] + + this._transitionDuration = this._getTransitionDuration() this._addEventListeners() } @@ -223,6 +225,24 @@ const Carousel = (($) => { return config } + _getTransitionDuration() { + // Get transition-duration of first element in the carousel + let transitionDuration = $(this._element).find(Selector.ITEM).css('transition-duration') + + // Return 0 carousel item is not found + if (!transitionDuration) { + return 0 + } + + // If multiple durations are defined, take the first + transitionDuration = transitionDuration.split(',')[0] + + // Multiply by 1000 if transition-duration is defined in seconds + return transitionDuration.indexOf('ms') > -1 + ? parseFloat(transitionDuration) + : parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER + } + _addEventListeners() { if (this._config.keyboard) { $(this._element) @@ -398,7 +418,7 @@ const Carousel = (($) => { setTimeout(() => $(this._element).trigger(slidEvent), 0) }) - .emulateTransitionEnd(TRANSITION_DURATION) + .emulateTransitionEnd(this._transitionDuration) } else { $(activeElement).removeClass(ClassName.ACTIVE) $(nextElement).addClass(ClassName.ACTIVE) diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index f81dc951e7..e19272c2d0 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -5,12 +5,17 @@ Carousel +

Carousel Bootstrap Visual Test

-

Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.

+

The transition duration should be around 2s. Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.