Wie kann ich die Geschwindigkeit steuern, mit der das Bootstrap-Karussell in Elementen verschoben wird?

83

Ich sehe, dass Sie das Intervall einstellen können, aber ich möchte steuern, wie schnell die Elemente gleiten.

   // Sets interval...what is transition slide speed?
    $('#mainCarousel').carousel({
    interval: 3000
});
twitter-bootstrap 
— Genxgeek
quelle
Googler -> um das Intervall zu verlangsamen (Zeit zwischen dem Anzeigen des nächsten Bildes) ::: stackoverflow.com/a/38203373/1985648
— Don Cheadle

Antworten:

114

Die Geschwindigkeit kann nicht von der API gesteuert werden. Sie können jedoch das dafür zuständige CSS ändern. In der carousel.lessDatei finden

.item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);
}

und wechseln Sie .6szu was auch immer Sie wollen.

Falls Sie .less nicht verwenden, finden Sie in der bootstrap.cssDatei:

.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;
}

und wechseln Sie 0.6szu der gewünschten Zeit. Möglicherweise möchten Sie die Zeit auch im folgenden Funktionsaufruf bearbeiten:

.emulateTransitionEnd(2000)

at bootstrap.jsin Funktion Carousel.prototype.slide. Dadurch wird der Übergang synchronisiert und verhindert, dass der Schlitten verschwindet, bevor der Übergang endet.

EDIT 7/8/2014

Wie @YellowShark betonte, werden die Änderungen in JS nicht mehr benötigt. Wenden Sie nur CSS-Änderungen an.

EDIT 20/8/2015 Nachdem Sie Ihre CSS-Datei bearbeitet haben, müssen Sie nur noch CAROUSEL.TRANSITION_DURATION (in bootstrap.js) oder c.TRANSITION_DURATION (wenn Sie bootstrap.min.js verwenden) bearbeiten und den Wert darin ändern (600 für Standard). Der endgültige Wert muss derselbe sein, den Sie in Ihre CSS-Datei eingegeben haben (z. B. 10s in CSS = 10000 in .js).

BEARBEITEN 16/01/2018 Um die Übergangszeit für Bootstrap 4 auf z. B. 2 Sekunden zu ändern, fügen Sie hinzu

$(document).ready(function() {
  jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 2000  // 2 seconds
});

in die JS-Datei Ihrer Site und

.carousel-inner .carousel-item {
  transition: -webkit-transform 2s ease;
  transition: transform 2s ease;
  transition: transform 2s ease, -webkit-transform 2s ease;
}

in die CSS-Datei Ihrer Site.

— Dmitry Efimenko
quelle
1
Danke für die Antwort! Ich habe versucht, Letzteres in meine Stile meiner .html-Hauptseite aufzunehmen und die .6 in .1 zu ändern, und es schien keine Auswirkung mit Chrome zu haben.
— Genxgeek
Nicht klar ... haben Sie versucht, Bootstrap-Dateien zu ändern, oder haben Sie dieses Zeug einfach in Ihr eigenes CSS eingefügt? Es ist sicherer, Bootstrap-Dateien zu bearbeiten. Andernfalls müssen Sie sicherstellen, dass Ihre Stile zuletzt geladen werden, und Bootstrap-Stile überschreiben.
— Dmitry Efimenko
2
Ich wollte nur darauf hinweisen, dass Sie kein JavaScript (mehr) ändern müssen. Diese Zeile im Code ruft jetzt den Wert .css ('Übergangsdauer') ab , sodass Sie nur noch etwas CSS wie oben beschrieben hinzufügen müssen das ist es. (
— Stellen Sie außerdem
5
In Bootstrap 3 (jedenfalls v3.3.5) zieht der JS diesen Dauerwert nicht mehr aus CSS. Es kann einfach eingestellt werden, ohne Bootstrap wie jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
— folgt
1
jQuery.fn.carousel.Constructor.TRANSITION_DURATION gibt undefiniert zurück. Wie ändert man das? Der Übergang funktioniert und wird langsam verschoben, aber das herausgleitende Bild wird angezeigt: keines; zu schnell.
— Ben
93

Schreiben Sie einfach data-intervalin divdas Karussell:

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">

Beispiel aus w3schools .

— jaswinder singh
quelle
Bitte versuchen Sie, Ihre Frage besser zu formatieren. Übrigens. Nur Links gelten nicht als gute Antworten.
— ckruczek
1
Warnung: Das "Datenintervall" wird in Millisekunden gemessen. 500 = 0,5 Sekunden (so schnell). Wenn Sie Text auf Folien anzeigen möchten, ist 10000 (10 Sekunden) besser. Funktioniert gut. Ich denke, das sollte die akzeptierte Antwort sein.
— Renascienza
19
Diese Antwort ist falsch . data-intervalbestimmt die Zeitspanne, nach der sich die neue Folie bewegt. Es wird nicht bestimmt, wie viel Zeit eine Folie benötigt, um sich zu bewegen.
— user31782
1
Danke Alter, es hat mir den Tag gerettet. +1 und dies sollte als richtige Antwort überprüft werden, anstatt die Datei bootstrap.css zu bearbeiten.
— FONGOH MARTIN
2
Ich habe nach DIESER genauen Antwort gesucht ... aber vorher die andere Antwort ausprobiert, bevor mir klar wurde, dass dies mit der Foliengeschwindigkeit zu tun hat, während sich diese Antwort mit den Intervallen zwischen den Folien befasst. Vielen Dank, dass Sie diese Antwort aufgenommen haben, denn genau das wollte ich! (obwohl 500 zu schnell ist, aber das ist eine andere Geschichte)
— Malachi
12

Sie müssen das Intervall im Haupt-DIV als Datenintervall-Tag festlegen. Das wird gut funktionieren und Sie können verschiedenen Folien unterschiedliche Zeit geben.

<div class="carousel" data-interval="5000">
— Ali Umair
quelle
Können Sie ein Beispiel geben? Ich muss ein anderes Zeitintervall für Diff-Folien angeben. Diese werden in meinem Controller konfiguriert, der von einem API-Aufruf zurückgegeben wurde. Können wir Webseiten auch mit dem Schieberegler anzeigen?
— Archna
1
Das Datenintervall bestimmt die Zeitspanne, nach der sich die neue Folie bewegt, nicht die Animationsdauer.
— Ricardo Vigatti
11

Für Twitter Bootstrap 3:

Sie müssen den CSS-Übergang wie in der anderen Antwort angegeben ändern:

.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;
}

Von 0,6 Sekunden bis 1,5 Sekunden (zum Beispiel).

Aber es gibt auch einige Javascript zu ändern. In der Datei bootstrap.js gibt es eine Zeile:

.emulateTransitionEnd(600)

Dies sollte auf die entsprechende Anzahl von Millisekunden geändert werden. Für 1,5 Sekunden würden Sie also die Zahl auf 1500 ändern:

.emulateTransitionEnd(1500)
— Chris Harrison
quelle
Chris, großartig. Vielen Dank!
— Genxgeek
8

Eine Sache, die mir aufgefallen ist, ist, dass Bootstrap 3 die Stile mit a .6sund hinzufügt 0.6s. Daher müssen Sie Ihre Übergangsdauer möglicherweise explizit wie folgt definieren (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;
    }
— bkrall
quelle
1
Nicht für mich arbeiten :( es rollt immer noch schnell wie ein Auto ohne Änderung (ich wechselte zu 1.6)
— Andiana
7

Verwenden Sie bei Bootstrap 4 einfach dieses CSS:

.carousel .carousel-item {
    transition-duration: 3s;
}

Wechseln Sie 3szur Dauer Ihrer Wahl.

— kmoser
quelle
1
sehr sehr schön :)
— Mohammed Baashar
5

für mich arbeitete daran, dies am Ende meiner Ansicht hinzuzufügen:

<script type="text/javascript">
$(document).ready(function(){
     $("#myCarousel").carousel({
         interval : 8000,
         pause: false
     });
});
</script>

es gibt dem Karussell ein Intervall von 8 Sekunden

— Erik
quelle
2

Wenn Sie dies programmgesteuert tun müssen, um (zum Beispiel) die Geschwindigkeit basierend auf bestimmten Bedingungen an möglicherweise nur einem von vielen Karussells zu ändern, können Sie Folgendes tun:

Wenn das HTML so ist:

<div id="theSlidesList" class="carousel-inner" role="listbox">
  <div id="Slide_00" class="item active"> ...
  <div id="Slide_01" class="item"> ...
  ...
</div>

JavaScript wäre wie folgt:

$( "#theSlidesList" ).find( ".item" ).css( "-webkit-transition", "transform 1.9s ease-in-out 0s" ).css( "transition", "transform 1.9s ease-in-out 0s" )

Fügen Sie weitere .css (...) hinzu, um andere Browser einzuschließen.

— Jelgab
quelle
2

Nach dem Einfügen bootstrap.min.jsoder Dekomprimieren können Sie einfach das Intervall als Parameter wie folgt hinzufügen. jQuery("#numbers").carousel({'interval':900 });Es funktioniert für mich

— Patrick Mutwiri
quelle
2

Wenn Sie die js-Dateien von bootstrap nicht ändern möchten, können Sie den gewünschten Wert auch direkt in das jquery-Plugin (bootsrap 3.3.6) einfügen.

Dies setzt natürlich voraus, dass das Karussell manuell über js und nicht direkt über das Data-Ride-Attribut aktiviert wird.

Zum Beispiel:

var interval = 3500;
$.fn.carousel.Constructor.TRANSITION_DURATION = interval - 500;
elem.carousel({
    interval : interval
});
— Andreas
quelle
Ich mag diesen Ansatz, weil Sie ihn nicht bearbeiten bootstrap.jsund "nicht aktualisierbar" machen müssen.
— TryingToImprove
Nachdem ich auf 200 gewechselt habe, sehe ich die glatte Animation nicht mehr, die Bilder werden mitten im Übergang
— verschwinden
Hi @TomSawyer - die Animationen werden über das CSS verwaltet, aber es ist wichtig, dass die TRANSITON_DURATION lang genug ist, um den vollständigen Übergang abzudecken. Im Javascript wird nur definiert, wann die inKlasse festgelegt und wann sie wieder entfernt wird. Wenn Sie die Animation kürzen möchten, überprüfen Sie bitte, wo sie in den weniger Dateien definiert ist.
— Andreas
2

Kein externer Code erforderlich, nur data-interval=""Attribut verwenden

Weitere Informationen finden Sie unter getbootstrap

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="2500">

Wenn Sie die Geschwindigkeit ändern möchten, ändern Sie "2500".

— Chethana Kalpa
quelle
Diese Lösung funktioniert nicht.
— Dinesh Shekhawat
1

Was für mich funktioniert hat, war das Intervall in bootstrap.js zu ändern

  Carousel.DEFAULTS = {
    interval: 2000,      // <----- change this
    pause: 'hover',
    wrap: true,
    keyboard: true
  }
— paulo62
quelle
1
Das steuert die Häufigkeit von Animationen, nicht die Geschwindigkeit einer einzelnen Animation.
— Walf
1

Um die vorherigen Antworten zu ergänzen, müssen Sie nach dem Bearbeiten Ihrer CSS-Datei nur CAROUSEL.TRANSITION_DURATION(in bootstrap.js ) oder c.TRANSITION_DURATION(wenn Sie bootstrap.min.js verwenden ) bearbeiten und den darin enthaltenen Wert ändern (standardmäßig 600). Der endgültige Wert muss derselbe sein, den Sie in Ihre CSS-Datei eingegeben haben (z. B. 10s in CSS = 10000 in .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
}
— Sergio Blanco
quelle
1

Wenn Sie die Geschwindigkeit bearbeiten möchten, mit der die Folien ein- und ausgehen (nicht die Zeit zwischen dem Ändern der Folien, die als Intervall bezeichnet wird), für Bootstrap 3.3.5 | Überschreiben Sie nach dem Laden von CDN-Bootstrap-Stilen die Stile in Ihrem eigenen CSS-Stil mit den folgenden Klassen. Die 1,5 ist die Zeitumstellung.

.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;

}

Danach müssen Sie die Karussellfunktion in Javascript ersetzen. Dazu überschreiben Sie nach dem Laden die Standardfunktion bootstrap.min.js. (Meiner Meinung nach ist es keine gute Idee, Bootstrap-Dateien direkt zu überschreiben). Erstellen Sie also eine mynewscript.js und laden Sie sie nach bootstrap.min.js und fügen Sie die neue Karussellfunktion hinzu. Die einzige Zeile, die Sie bearbeiten möchten, ist diese, Carousel.TRANSITION_DURATION = 1500. 1500 ist 1.5. Hoffe das hilft.

    +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);
— Cameron
quelle
1

Für Bootstrap - 4 mit SCSS, können Sie die Konfigurationsvariable überschreiben $carousel-transition-durationin der _variables.scsswie folgt aus :

$carousel-transition-duration: 2s;

Oder für Element individuelle Dauer einstellen

.carousel-item {
    transition-duration: 2s;
}

Ihres spezifischen Elements in Ihrem CSS / SCSS.

— shaack
quelle
0

Alles Karussell 

  <script type="text/javascript">
              $(document).ready(function () {
            $('.carousel').carousel({
                interval: 15000
            })
        });

    </script>
— سیدرسول میرعظیمی
quelle
Bitte geben Sie eine Erklärung mit Antwort
— Panther
1
Wieder einmal bestimmt dies einfach das Intervall, nicht die Übergangszeit
— Tim Hallman
0

In Ihrem CSS:

.carousel-item {
    transition-duration: 1.5s, 1.5s;
}

Achten Sie darauf, dass die Zeit in dem für das Karussell definierten Datenintervall enthalten ist.

Ich hoffe es hilft... :)

— Ovidiu Cosma
quelle
0

Ändern Sie in Ihrer Datei main.js oder bootstrap.js den Wert von autoplayTimeout

    $('.carousel').each(function () {
        $(this).owlCarousel({
            nav: $(this).data('nav'),
            dots: $(this).data('dots'),
            loop: $(this).data('loop'),
            margin: $(this).data('space'),
            center: $(this).data('center'),
            dotsSpeed: $(this).data('speed'),
            autoplay: $(this).data('autoplay'),
            transitionStyle: $(this).data('transition'),
            animateOut: $(this).data('animate-out'),
            animateIn: $(this).data('animate-in'),
            autoplayTimeout: 3000,
            responsive: {
                0: {
                    items: 1,
                },
                400: {
                    items: $(this).data('slide-sm'),
                },
                700: {
                    items: $(this).data('slide-md'),
                },
                1000: {
                    items: $(this).data('slide'),
                }
            }
        });
    });
Erweitern Sie das Snippet

— W. KIJEDI
quelle
-1

Wenn Sie das ngCarousel-Modul verwenden, bearbeiten Sie die Intervallvariable in der Datei @ ng-bootstrap / ng-bootstrap / carousel-config.js wie folgt:

var NgbCarouselConfig = /** @class */ (function () {
function NgbCarouselConfig() {
    this.interval = 10000;
    this.wrap = true;
    ...
}
...
— user773881
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.