Jak mogę kontrolować prędkość przesuwania karuzeli bootstrap w elementach?

Widzę, że możesz ustawić interwał, ale chcę kontrolować szybkość przesuwania się elementów?

   // Sets interval...what is transition slide speed?
    $('#mainCarousel').carousel({
    interval: 3000
});

Prędkość nie może być kontrolowana przez API. Chociaż możesz zmodyfikować CSS, który za to odpowiada. W carousel.lesspliku znajdź

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

i zmień .6sna co chcesz.

Jeśli nie używasz .less, znajdź w bootstrap.csspliku:

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

i zmień 0.6sna wybrany czas. Możesz również chcieć edytować czas w wywołaniu funkcji poniżej:

.emulateTransitionEnd(2000) 

co bootstrap.jsw funkcji Carousel.prototype.slide. To synchronizuje przejście i zapobiega znikaniu ślizgu przed zakończeniem przejścia.

EDYCJA 08.07.2014

Jak zauważył @YellowShark, zmiany w JS nie są już potrzebne. Zastosuj tylko zmiany CSS.

EDIT 20/8/2015 Teraz, po edycji pliku css, wystarczy edytować CAROUSEL.TRANSITION_DURATION (w bootstrap.js) lub c.TRANSITION_DURATION (jeśli używasz bootstrap.min.js) i zmienić wartość w nim (Domyślnie 600). Ostateczna wartość musi być taka sama, jaką umieściłeś w pliku css (na przykład 10s w css = 10000 in .js)

EDIT 16/01/2018 Dla Bootstrap 4, aby zmienić czas przejścia na np. 2 sekundy, dodaj

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

do pliku JS swojej witryny, a

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

do pliku CSS witryny.

Po prostu napisz data-intervalw divzawierającym karuzelę:

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

Przykład zaczerpnięty z w3schools .

Musisz ustawić interwał w głównym DIV jako tag interwału danych. To będzie działać dobrze i możesz dać inny czas różnym slajdom.

<div class="carousel" data-interval="5000">

W przypadku Twitter Bootstrap 3:

Musisz zmienić przejście CSS, jak określono w innej odpowiedzi:

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

Na przykład od 0,6 sekundy do 1,5 sekundy.

Ale jest też trochę Javascript do zmiany. W pliku bootstrap.js znajduje się wiersz:

.emulateTransitionEnd(600)

Należy to zmienić na odpowiednią liczbę milisekund. Więc przez 1,5 sekundy zmieniłbyś liczbę na 1500:

.emulateTransitionEnd(1500)

Zauważyłem jedną rzecz, że Bootstrap 3 dodaje style za pomocą zarówno a, jak .6si 0.6s. Dlatego może być konieczne wyraźne zdefiniowanie czasu trwania przejścia w ten sposób (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;
    }

Z Bootstrap 4, po prostu użyj tego CSS:

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

Zmień 3swybrany czas trwania.

pracowałem nad dodaniem tego na końcu mojego widoku:

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

daje to karuzeli odstęp 8 sekund

nie potrzeba żadnego zewnętrznego kodu, wystarczy użyć data-interval=""atrybutu

więcej informacji odwiedź getbootstrap

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

kiedy chcesz zmienić prędkość zmień "2500"

Jeśli chcesz to zrobić programowo, aby zmienić (na przykład) prędkość w oparciu o określone warunki na być może tylko jednej z wielu karuzel, możesz zrobić coś takiego:

Jeśli kod HTML wygląda tak:

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

JavaScript wyglądałby tak:

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

Dodaj więcej plików .css (...), aby uwzględnić inne przeglądarki.

po bootstrap.min.jsdołączeniu lub zdekompresowaniu jednego, możesz po prostu dodać interwał jako parametr, jak poniżej. U jQuery("#numbers").carousel({'interval':900 });mnie działa

Jeśli nie chcesz zmieniać plików js programu bootstrap, możesz również bezpośrednio wstrzyknąć żądaną wartość do wtyczki jquery (bootsrap 3.3.6).

Wymaga to oczywiście, aby karuzela była aktywowana ręcznie przez js, a nie bezpośrednio przez atrybut data-ride.

Na przykład:

var interval = 3500;
$.fn.carousel.Constructor.TRANSITION_DURATION = interval - 500;
elem.carousel({
    interval : interval
});

W przypadku bootstrap 4 z scss możesz nadpisać zmienną konfiguracyjną $carousel-transition-durationw _variables.scssnastępujący sposób:

$carousel-transition-duration: 2s;

Lub dla indywidualnego czasu trwania elementu ustaw

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

Twojego konkretnego elementu w twoim css / scss.

U mnie zadziałała zmiana interwału w pliku bootstrap.js

  Carousel.DEFAULTS = {
    interval: 2000,      // <----- change this
    pause: 'hover',
    wrap: true,
    keyboard: true
  }

Aby uzupełnić poprzednie odpowiedzi, po edycji pliku CSS wystarczy edytować CAROUSEL.TRANSITION_DURATION(w bootstrap.js ) lub c.TRANSITION_DURATION(jeśli używasz bootstrap.min.js ) i zmienić jego wartość (domyślnie 600). Ostateczna wartość musi być taka sama, jak umieszczona w pliku CSS (na przykład 10 w CSS = 10000 w .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
}

Jeśli chcesz edytować szybkość, z jaką slajdy wchodzą i wychodzą (a nie czas pomiędzy zmianą slajdów, zwany interwałem), w programie bootstrap 3.3.5 | Po załadowaniu stylów bootstrap CDN, nadpisz style we własnym zestawie stylów css, używając następujących klas. 1.5 to zmiana czasu.

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

}

potem będziesz musiał zamienić funkcję karuzeli w javascript. Aby to zrobić, po załadowaniu nadpisujesz domyślną funkcję bootstrap.min.js. (Moim zdaniem bezpośrednie nadpisywanie plików bootstrap nie jest dobrym pomysłem). więc utwórz mynewscript.js i załaduj go po bootstrap.min.js i dodaj nową funkcję karuzeli. Jedyną linią, którą chcesz edytować, jest ta Carousel.TRANSITION_DURATION = 1500. 1500 to 1,5. Mam nadzieję że to pomoże.

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

W swoim CSS:

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

Uważaj, czas jest zawarty w przedziale danych zdefiniowanym dla karuzeli.

Mam nadzieję, że to pomoże... :)

Cała karuzela

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

    </script>

Dodaj interwał danych

data-interval="20000"

W pliku main.js lub bootstrap.js zmień wartość 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'),
                }
            }
        });
    });

Możesz tego użyć

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="4000">

Po prostu dodaj data-interval = "1000", gdzie następny obrazek. nastąpi po 1 sek.

Jeśli używasz modułu ngCarousel, edytuj zmienną interwałową w pliku @ ng-bootstrap / ng-bootstrap / carousel-config.js w następujący sposób:

var NgbCarouselConfig = /** @class */ (function () {
function NgbCarouselConfig() {
    this.interval = 10000;
    this.wrap = true;
    ...
}
...