Cum pot controla viteza cu care caruselul bootstrap alunecă în elemente? (Programare, Twitter Bootstrap)

genxgeek a intrebat.

Văd că puteți seta intervalul, dar vreau să controlez cât de repede alunecă elementele?

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

Comentarii

  • Googlers –> pentru a încetini INTERVALUL (timpul dintre afișarea următoarei imagini):::: stackoverflow.com/a/38203373/1985648 –  > Por Don Cheadle.
23 răspunsuri
Dmitri Efimenko

Viteza nu poate fi controlată de API. Deși puteți modifica CSS-ul care se ocupă de asta. în carousel.less fișier găsiți

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

și modificați .6s în ceea ce doriți.


În cazul în care nu folosiți .less, găsiți în fișierul bootstrap.css fișier:

.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 schimbați 0.6s cu ora pe care o doriți. De asemenea, este posibil să doriți să modificați timpul în apelul funcției de mai jos:

.emulateTransitionEnd(2000) 

at bootstrap.js în funcția Carousel.prototype.slide. Acest lucru sincronizează tranziția și previne dispariția diapozitivului înainte ca tranziția să se termine.

EDITARE 7/8/2014

După cum a subliniat @YellowShark, modificările din JS nu mai sunt necesare. Aplicați doar modificările css.

EDIT 20/8/2015Acum, după ce ați editat fișierul css, trebuie doar să editați CAROUSEL.TRANSITION_DURATION (în bootstrap.js) sau c.TRANSITION_DURATION (dacă folosiți bootstrap.min.js) și să modificați valoarea din interiorul acestuia (600 pentru implicit). Valoarea finală trebuie să fie aceeași pe care ați pus-o în fișierul css( de exemplu 10s în css = 10000 în .js)

MODIFICARE 16/01/2018Pentru Bootstrap 4, pentru a schimba timpul de tranziție la, de exemplu, 2 secunde, adăugați

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

în fișierul JS al site-ului dvs. și

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

la fișierul CSS al site-ului dvs.

Comentarii

  • Vă mulțumim pentru răspuns! Am încercat să-l pun pe acesta din urmă în stilurile din pagina mea principală .html și am schimbat .6 în .1 și nu pare să aibă niciun efect folosind Chrome. –  > Por genxgeek.
  • Nu este clar… ai încercat să modifici fișierele bootstrap sau ai adăugat aceste lucruri în propriul css? Este mai sigur să modificați fișierele bootstrap. În caz contrar, trebuie să vă asigurați că stilurile dvs. se încarcă ultimele și suprascriu stilurile bootstrap. –  > Por Dmitry Efimenko.
  • Am vrut doar să subliniez că NU trebuie să modificați niciun javaScript (mai), acea linie din cod trage acum valoarea .css(‘transition-duration’), așa că trebuie doar să adăugați niște CSS așa cum este descris mai sus și gata. (De asemenea, asigurați-vă că elementul carusel are clasa „slide”, nu sunt sigur că este menționat în documente). –  > Por YellowShark.
  • În Bootstrap 3 (v3.3.5, oricum), JS nu mai extrage acea valoare de durată din CSS. Aceasta poate fi setată cu ușurință fără a modifica Bootstrap în felul următor: jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 1000; –  > Por Walf.
  • jQuery.fn.carousel.Constructor.TRANSITION_DURATION returnează nedefinit. Cum se poate modifica? Tranziția funcționează și alunecă încet, dar imaginea care alunecă devine display: none; prea repede. –  > Por Ben.
jaswinder singh

Doar scrie data-interval în div care conține caruselul:

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

Exemplu preluat din w3schools.

Comentarii

  • Vă rugăm să încercați să formatați întrebarea într-un mod mai corect. Btw. doar link-urile nu sunt considerate răspunsuri bune. –  > Por ckruczek.
  • Atenție: „data-interval” se măsoară în milisecunde. 500 = 0,5 sec (atât de rapid). Dacă aveți ceva text de arătat pe diapozitive, 10000 (10sec) este mai bine. Funcționează bine. Cred că acesta ar trebui să fie răspunsul acceptat. –  > Por Renascienza.
  • 20

  • Acest răspuns este incorect. data-interval determină intervalul de timp după care se deplasează noua alunecare. Nu determină cât timp îi ia unui diapozitiv să se deplaseze. –  > Por user31782.
  • Mulțumesc, amice, mi-a salvat ziua. +1 și acest lucru ar trebui să fie verificat ca răspuns corect, mai degrabă decât să mergeți la editarea fișierului bootstrap.css. –  > Por FONGOH MARTIN.
  • Căutam exact ACEST răspuns… dar am încercat celălalt răspuns înainte, înainte de a-mi da seama că acela avea de-a face cu viteza diapozitivelor, în timp ce acest răspuns se referă la intervalele dintre diapozitive. Așa că vă mulțumesc că ați inclus acest răspuns, deoarece era exact ceea ce căutam! (chiar dacă 500 este prea rapid, dar asta este o altă poveste) –  > Por Malachi.
Ali Umair

Trebuie să setați intervalul în DIV-ul principal ca etichetă data-interval. Acesta va funcționa bine și puteți da un timp diferit pentru diferite diapozitive.

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

Comentarii

  • Puteți oferi un exemplu. Am nevoie să dau un interval de timp diferit pentru diapozitive diferite și acestea sunt configurate în controlerul meu returnat de la un apel api. Putem afișa și pagini web folosind sliderul? –  > Por Archna.
  • data-interval determină intervalul de timp după care se mișcă noul diapozitiv, nu durata animației. –  > Por Ricardo Vigatti.
Chris Harrison

Pentru Twitter Bootstrap 3:

Trebuie să modificați tranziția CSS, așa cum este specificat în celălalt răspuns:

.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 la 0,6 secunde la 1,5 secunde (de exemplu).

Dar, de asemenea, există și ceva Javascript de modificat. În bootstrap.js există o linie:

.emulateTransitionEnd(600)

Aceasta trebuie schimbată în cantitatea corespunzătoare de milisecunde. Deci, pentru 1,5 secunde, ar trebui să schimbați numărul în 1500:

.emulateTransitionEnd(1500)

Comentarii

  • Chris, minunat. Mulțumesc! –  > Por genxgeek.
bkrall

Un lucru pe care l-am observat este că Bootstrap 3 adaugă stilurile atât cu un .6s și 0.6s. Așa că s-ar putea să fie nevoie să definiți explicit durata tranziției astfel (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;
    }

Comentarii

  • Nu funcționează pentru mine 🙁 este încă rola rapid ca o mașină cu nici o schimbare (Am schimbat la 1.6) –  > Por Andiana.
kmoser

Cu Bootstrap 4, folosiți doar acest CSS:

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

Schimbă 3s în durata pe care o alegeți.

Comentarii

  • foarte foarte frumos 🙂 –  > Por Mohammed Baashar.
Erik

pentru mine a lucrat pentru a adăuga acest lucru la sfârșitul vizualizării mele:

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

dă caruselului un interval de 8 secunde

Chethana Kalpa

nu este nevoie de nici un cod extern, utilizați doar data-interval="" atributul

mai multe informații vizitați getbootstrap

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

atunci când doriți să schimbați viteza schimbați „2500”

shaack

Pentru bootstrap 4 cu scss, puteți suprascrie variabila de configurare $carousel-transition-duration în pagina dvs. _variables.scss în felul următor:

$carousel-transition-duration: 2s;

Sau pentru durata individuală a elementului setați

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

a elementului dvs. specific în css/scss.

Jelgab

Dacă trebuie să o faceți programatic pentru a schimba (de exemplu) viteza în funcție de anumite condiții, poate doar pe unul din mai multe caruseluri, ați putea face ceva de genul acesta:

Dacă Html-ul este așa:

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

JavaScript ar fi așa:

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

Adăugați mai multe .css( … ) pentru a include și alte browsere.

Patrick Mutwiri

după includerea bootstrap.min.js sau unul necomprimat, puteți adăuga doar intervalul ca parametru, ca mai jos jQuery("#numbers").carousel({'interval':900 }); Funcționează pentru mine

Andreas

Dacă nu doriți să modificați fișierele js ale bootstrap, puteți, de asemenea, să injectați direct valoarea dorită în pluginul jquery (bootsrap 3.3.6).

Acest lucru necesită, desigur, ca caruselul să fie activat manual prin js, nu direct prin atributul data-ride.

De exemplu:

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

Comentarii

  • Îmi place această abordare, deoarece nu necesită să editați bootstrap.js, făcându-l astfel „neactualizabil”… -.  > Por TryingToImprove.
  • După ce am schimbat la 200, nu mai văd animația lină, imaginile se vor dispărea chiar în mijlocul tranziției – -.  > Por TomSawyer.
  • Bună @TomSawyer – animațiile sunt menținute prin intermediul css, dar este important, că TRANSITON_DURATION este suficient de lungă, pentru a acoperi întreaga tranziție. în javascript se definește doar, atunci când in clasa este setată și când este eliminată din nou. Dacă doriți să scurtați animația, vă rugăm să verificați, unde este definită în fișierele less. –  > Por Andreas.
paulo62

Ceea ce a funcționat pentru mine a fost să schimb interval în bootstrap.js

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

Comentarii

  • Asta controlează frecvența animațiilor, nu viteza unei animații individuale. –  > Por Walf.
Sergio Blanco

Pentru a completa răspunsurile anterioare, după ce ați editat fișierul CSS, trebuie doar să editați CAROUSEL.TRANSITION_DURATION (în bootstrap.js) sau c.TRANSITION_DURATION (dacă folosiți bootstrap.min.js) și pentru a schimba valoarea din interiorul acestuia (600 pentru valoarea implicită). Valoarea finală trebuie să fie aceeași pe care ați pus-o în fișierul CSS (de exemplu, 10s în CSS = 10000 în .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
}

سیدرسول میرعظیمیی

Toate caruselul

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

    </script>

Comentarii

  • Vă rugăm să oferiți explicații odată cu răspunsul –  > Por Pantera.
  • Încă o dată, acest lucru determină pur și simplu intervalul, nu timpul de tranziție –  > Por Tim Hallman.
Cameron

Dacă doriți să editați viteza cu care intră și ies diapozitivele (nu timpul dintre schimbarea diapozitivelor numit interval) pentru bootstrap 3.3.5 | După încărcarea stilurilor CDN bootstrap, suprascrieți stilurile în propriul dvs. set de stiluri css folosind următoarele clase. 1.5 este schimbarea timpului.

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

}

după aceea, va trebui să înlocuiți funcția carusel în javascript. Pentru a face acest lucru, veți suprascrie funcția implicită bootstrap.min.js după ce se încarcă. (După părerea mea, nu este o idee bună să suprascrieți direct fișierele bootstrap). deci creați un mynewscript.js și încărcați-l după bootstrap.min.js și adăugați noua funcție carusel. Singura linie pe care veți dori să o editați este aceasta, Carousel.TRANSITION_DURATION = 1500. 1500 fiind 1,5. Sper că vă ajută.

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

Ovidiu Cosma

În CSS-ul tău:

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

Aveți grijă, timpul este inclus în data-interval definit pentru carusel.

Sper să te ajute… 🙂

Pankaj Upadhyay

Adăugați intervalul de date

data-interval="20000"

W. KIJEDI

În fișierul main.js sau bootstrap.js, modificați valoarea lui autoplayTimeout

Jovan Ilic

Puteți utiliza acest lucru

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

Doar adăugați data-interval="1000" unde următoarea imagine va fi după 1 sec.

user773881

Dacă folosiți modulul ngCarousel, editați variabila interval în fișierul @ng-bootstrap/ng-bootstrap/carousel-config.js astfel:

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

pubudu sachintha

use data-interval="2000" ca mai jos

1000 = 1 sec

<div id="carouselExampleIndicators" class="carousel slide carousel-custom" data-`ride="carousel" data-interval="2000">`

enjoi4life411

Utilizarea unei combinații de două răspunsuri mi-a oferit stilul pe care îl căutam.

data-interval attr nu a funcționat deloc pentru mine în bootstrap 5. De asemenea, eu nu stochez bootstrap la nivel local

Pentru a încetini timpul de trecere de la UN diapozitiv la altul

Fișierul CSS al site-ului.

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

Pentru a încetini întârzierea ÎNAINTE de a trece la slide-ul următor

Fișierul JS al site-ului

$(document).ready(function () {
  $('.carousel').carousel({
    interval: 15000
  })
});