Comment puis-je contrôler la vitesse à laquelle le carrousel bootstrap glisse dans les éléments?
Je vois que vous pouvez définir l’intervalle, mais je veux contrôler la vitesse de glissement des éléments.
// Sets interval...what is transition slide speed?
$('#mainCarousel').carousel({
interval: 3000
});
La vitesse ne peut pas être contrôlée par l'API. Bien que vous puissiez modifier le CSS qui en est responsable, . Dans le fichier carousel.less, recherchez
.item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
}
et remplacez .6s par ce que vous voulez.
Si vous n'utilisez pas .less, recherchez dans le fichier bootstrap.css:
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
et remplacez 0.6s par l'heure souhaitée. Vous pouvez également souhaiter modifier l'heure dans l'appel de fonction ci-dessous:
.emulateTransitionEnd(2000)
à bootstrap.js dans la fonction Carousel.prototype.slide. Cela synchronise la transition et empêche la diapositive de disparaître avant la fin de la transition.
EDIT 08/07/2014
Comme @YellowShark l'a souligné, les modifications dans JS ne sont plus nécessaires. Appliquer uniquement les modifications css.
EDIT 20/8/2015 Maintenant, après avoir modifié votre fichier css, il vous suffit de modifier CAROUSEL.TRANSITION_DURATION (dans bootstrap.js) ou c.TRANSITION_DURATION (si vous utilisez bootstrap.min.js) et pour changer la valeur à l'intérieur (600 par défaut). La valeur finale doit être identique à celle que vous avez insérée dans votre fichier css (par exemple, 10s en css = 10000 en .js)
EDIT 16/01/2018 Pour Bootstrap 4, pour changer le temps de transition, par exemple, à 2 secondes, ajoutez
$(document).ready(function() {
jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 2000 // 2 seconds
});
au fichier JS de votre site, et
.carousel-inner .carousel-item {
transition: -webkit-transform 2s ease;
transition: transform 2s ease;
transition: transform 2s ease, -webkit-transform 2s ease;
}
dans le fichier CSS de votre site.
Il suffit d'écrire data-interval dans la div contenant le carrousel:
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
Exemple tiré de w3schools .
Vous devez définir un intervalle dans la DIV principale en tant que balise d'intervalle de données. Cela fonctionnera bien et vous pourrez accorder un temps différent à différentes diapositives.
<div class="carousel" data-interval="5000">
Pour Twitter Bootstrap 3:
Vous devez modifier la transition CSS comme spécifié dans l'autre réponse:
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
De 0,6 seconde à 1,5 seconde (par exemple).
Mais aussi, il y a du Javascript à changer. Dans le fichier bootstrap.js, il y a une ligne:
.emulateTransitionEnd(600)
Cela devrait être changé pour la quantité correspondante de millisecondes. Donc, pendant 1,5 seconde, vous modifiez le nombre en 1500:
.emulateTransitionEnd(1500)
Une chose que j'ai remarquée est que Bootstrap 3 ajoute les styles avec à la fois un .6s et un 0.6s. Donc, vous devrez peut-être explicitement définir votre durée de transition comme ceci (CSS)
.carousel-inner>.item {
-webkit-transition: 0.9s ease-in-out left;
transition: 0.9s ease-in-out left;
-webkit-transition: 0.9s, ease-in-out, left;
-moz-transition: .9s, ease-in-out, left;
-o-transition: .9s, ease-in-out, left;
transition: .9s, ease-in-out, left;
}
pour moi a travaillé pour ajouter ceci à la fin de mon point de vue:
<script type="text/javascript">
$(document).ready(function(){
$("#myCarousel").carousel({
interval : 8000,
pause: false
});
});
</script>
il donne au carrousel un intervalle de 8 secondes
après avoir inclus bootstrap.min.js ou non compressé, vous pouvez simplement ajouter intervalle comme paramètre ci-dessous jQuery("#numbers").carousel({'interval':900 }); Cela fonctionne pour moi
Si vous ne souhaitez pas modifier les fichiers js de bootstrap, vous pouvez également injecter directement la valeur souhaitée dans le plug-in jquery (bootsrap 3.3.6).
Cela nécessite bien entendu que le carrousel soit activé manuellement via js et non directement via l'attribut data-ride.
Par exemple:
var interval = 3500;
$.fn.carousel.Constructor.TRANSITION_DURATION = interval - 500;
elem.carousel({
interval : interval
});
Si vous devez le faire par programme pour modifier (par exemple) la vitesse en fonction de certaines conditions sur peut-être un seul des nombreux carrousels, vous pouvez procéder comme suit:
Si le HTML est comme ça:
<div id="theSlidesList" class="carousel-inner" role="listbox">
<div id="Slide_00" class="item active"> ...
<div id="Slide_01" class="item"> ...
...
</div>
JavaScript serait comme ceci:
$( "#theSlidesList" ).find( ".item" ).css( "-webkit-transition", "transform 1.9s ease-in-out 0s" ).css( "transition", "transform 1.9s ease-in-out 0s" )
Ajoutez plus .css (...) pour inclure d'autres navigateurs.
Ce qui a fonctionné pour moi a été de changer intervalle dans bootstrap.js
Carousel.DEFAULTS = {
interval: 2000, // <----- change this
pause: 'hover',
wrap: true,
keyboard: true
}
Pour compléter les réponses précédentes, après avoir modifié votre fichier CSS, il vous suffit de modifier CAROUSEL.TRANSITION_DURATION (dans bootstrap.js ) ou c.TRANSITION_DURATION (si vous utilisez bootstrap.min.js ) et de modifier la valeur. à l'intérieur (600 par défaut). La valeur finale doit être identique à celle que vous avez insérée dans votre fichier CSS (par exemple, 10s en CSS = 10000 en .js)
Carousel.VERSION = '3.3.2'
Carousel.TRANSITION_DURATION = xxxxx /* Your number here*/
Carousel.DEFAULTS = {
interval: 5000 /* you could change this value too, but to add data-interval="xxxx" to your html it's fine too*/
pause: 'hover',
wrap: true,
keyboard: true
}
Si vous souhaitez modifier la vitesse à laquelle les diapositives entrent et sortent (pas le temps entre les changements de diapositives appelé intervalle) pour bootstrap 3.3.5 | Après avoir chargé les styles de démarrage CDN, écrasez les styles dans votre propre style de style CSS à l'aide des classes suivantes. le 1.5 est le changement de temps.
.carousel-inner > .item {
-webkit-transition: 1.5s ease-in-out ;
-o-transition: 1.5s ease-in-out ;
transition: 1.5s ease-in-out ;
}
.carousel-inner > .item {
-webkit-transition: -webkit-transform 1.5s ease-in-out;
-o-transition: -o-transform 1.5s ease-in-out;
transition: transform 1.5s ease-in-out;
}
après cela, vous devrez remplacer la fonction carrousel en javascript. Pour ce faire, vous écraserez la fonction bootstrap.min.js par défaut après son chargement. (À mon avis, ce n’est pas une bonne idée d’écraser directement les fichiers bootstrap) . Créez donc un mynewscript.js et chargez-le après bootstrap.min.js et ajoutez la nouvelle fonction de carrousel. La seule ligne que vous souhaitez modifier est celle-ci, Carousel.TRANSITION_DURATION = 1500. 1500 étant 1.5. J'espère que cela t'aides.
+function ($) {
'use strict';
// CAROUSEL CLASS DEFINITION
// =========================
var Carousel = function (element, options) {
this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options
this.paused = null
this.sliding = null
this.interval = null
this.$active = null
this.$items = null
this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))
this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element
.on('mouseenter.bs.carousel', $.proxy(this.pause, this))
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
}
Carousel.VERSION = '3.3.5'
Carousel.TRANSITION_DURATION = 1500
Carousel.DEFAULTS = {
interval: 5000,
pause: 'hover',
wrap: true,
keyboard: true
}
Carousel.prototype.keydown = function (e) {
if (/input|textarea/i.test(e.target.tagName)) return
switch (e.which) {
case 37: this.prev(); break
case 39: this.next(); break
default: return
}
e.preventDefault()
}
Carousel.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval && clearInterval(this.interval)
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
return this
}
Carousel.prototype.getItemIndex = function (item) {
this.$items = item.parent().children('.item')
return this.$items.index(item || this.$active)
}
Carousel.prototype.getItemForDirection = function (direction, active) {
var activeIndex = this.getItemIndex(active)
var willWrap = (direction == 'prev' && activeIndex === 0)
|| (direction == 'next' && activeIndex == (this.$items.length - 1))
if (willWrap && !this.options.wrap) return active
var delta = direction == 'prev' ? -1 : 1
var itemIndex = (activeIndex + delta) % this.$items.length
return this.$items.eq(itemIndex)
}
Carousel.prototype.to = function (pos) {
var that = this
var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
if (pos > (this.$items.length - 1) || pos < 0) return
if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
if (activeIndex == pos) return this.pause().cycle()
return this.slide(pos > activeIndex ? 'next' : 'prev', this.$items.eq(pos))
}
Carousel.prototype.pause = function (e) {
e || (this.paused = true)
if (this.$element.find('.next, .prev').length && $.support.transition) {
this.$element.trigger($.support.transition.end)
this.cycle(true)
}
this.interval = clearInterval(this.interval)
return this
}
Carousel.prototype.next = function () {
if (this.sliding) return
return this.slide('next')
}
Carousel.prototype.prev = function () {
if (this.sliding) return
return this.slide('prev')
}
Carousel.prototype.slide = function (type, next) {
var $active = this.$element.find('.item.active')
var $next = next || this.getItemForDirection(type, $active)
var isCycling = this.interval
var direction = type == 'next' ? 'left' : 'right'
var that = this
if ($next.hasClass('active')) return (this.sliding = false)
var relatedTarget = $next[0]
var slideEvent = $.Event('slide.bs.carousel', {
relatedTarget: relatedTarget,
direction: direction
})
this.$element.trigger(slideEvent)
if (slideEvent.isDefaultPrevented()) return
this.sliding = true
isCycling && this.pause()
if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active')
var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
$nextIndicator && $nextIndicator.addClass('active')
}
var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
if ($.support.transition && this.$element.hasClass('slide')) {
$next.addClass(type)
$next[0].offsetWidth // force reflow
$active.addClass(direction)
$next.addClass(direction)
$active
.one('bsTransitionEnd', function () {
$next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' '))
that.sliding = false
setTimeout(function () {
that.$element.trigger(slidEvent)
}, 0)
})
.emulateTransitionEnd(Carousel.TRANSITION_DURATION)
} else {
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger(slidEvent)
}
isCycling && this.cycle()
return this
}
// CAROUSEL PLUGIN DEFINITION
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.carousel')
var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
var action = typeof option == 'string' ? option : options.slide
if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option)
else if (action) data[action]()
else if (options.interval) data.pause().cycle()
})
}
var old = $.fn.carousel
$.fn.carousel = Plugin
$.fn.carousel.Constructor = Carousel
// CAROUSEL NO CONFLICT
// ====================
$.fn.carousel.noConflict = function () {
$.fn.carousel = old
return this
}
// CAROUSEL DATA-API
// =================
var clickHandler = function (e) {
var href
var $this = $(this)
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
if (!$target.hasClass('carousel')) return
var options = $.extend({}, $target.data(), $this.data())
var slideIndex = $this.attr('data-slide-to')
if (slideIndex) options.interval = false
Plugin.call($target, options)
if (slideIndex) {
$target.data('bs.carousel').to(slideIndex)
}
e.preventDefault()
}
$(document)
.on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
.on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)
$(window).on('load', function () {
$('[data-ride="carousel"]').each(function () {
var $carousel = $(this)
Plugin.call($carousel, $carousel.data())
})
})
}(jQuery);
Si vous utilisez le module ngCarousel, éditez la variable interval dans le fichier @ ng-bootstrap/ng-bootstrap/carousel-config.js comme suit:
var NgbCarouselConfig = /** @class */ (function () {
function NgbCarouselConfig() {
this.interval = 10000;
this.wrap = true;
...
}
...
Avec Bootstrap 4, utilisez simplement ce CSS:
.carousel .carousel-item {
transition-duration: 3s;
}
Changez 3s pour la durée de votre choix.
Ajouter un intervalle de données
data-interval="20000"
Dans votre CSS:
.carousel-item {
transition-duration: 1.5s, 1.5s;
}
Attention, l'heure est comprise dans l'intervalle de données défini pour le carrousel.
J'espère que ça aide... :)
Tout carrousel
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel({
interval: 15000
})
});
</script>