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

Question 1

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

Question 2

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.

Question 3

Schreiben Sie einfach data-intervalin divdas Karussell:

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

Beispiel aus w3schools .

Question 4

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">

Question 5

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)

Question 6

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

Question 7

Verwenden Sie bei Bootstrap 4 einfach dieses CSS:

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

Wechseln Sie 3szur Dauer Ihrer Wahl.

Question 8

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

Question 9

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.

Question 10

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

Question 11

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

Question 12

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

Question 13

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
  }

Question 14

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
}

Question 15

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

Question 16

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.

Question 17

Alles Karussell

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

    </script>

Question 18

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... :)

Question 19

Ä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

Question 20

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

Question 21

Datenintervall hinzufügen

data-interval="20000"

Answer 1

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

Answer 2

Googler -> um das Intervall zu verlangsamen (Zeit zwischen dem Anzeigen des nächsten Bildes) ::: stackoverflow.com/a/38203373/1985648

Don Cheadle

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

Bitte versuchen Sie, Ihre Frage besser zu formatieren. Übrigens. Nur Links gelten nicht als gute Antworten.

ckruczek

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

1

Das Datenintervall bestimmt die Zeitspanne, nach der sich die neue Folie bewegt, nicht die Animationsdauer.

Ricardo Vigatti

Answer 18

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)

Answer 19

Chris, großartig. Vielen Dank!

Genxgeek

Answer 20

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

Answer 21

1

Nicht für mich arbeiten :( es rollt immer noch schnell wie ein Auto ohne Änderung (ich wechselte zu 1.6)

Andiana

Answer 22

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

Answer 23

1

sehr sehr schön :)

Mohammed Baashar

Answer 24

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

Answer 25

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.

Answer 26

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

Answer 27

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

Answer 28