Làm cách nào để kiểm soát tốc độ băng chuyền bootstrap trượt trong các mục?

Question 1

Tôi thấy bạn có thể đặt khoảng thời gian nhưng tôi muốn kiểm soát tốc độ trượt của các mục?

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

Question 2

Tốc độ không thể được kiểm soát bởi API. Mặc dù bạn có thể sửa đổi CSS phụ trách việc đó. Trong carousel.lesstệp tìm thấy

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

và thay đổi .6sbất cứ điều gì bạn muốn.

Trong trường hợp bạn không sử dụng .less, hãy tìm trong bootstrap.csstệp:

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

và thay đổi 0.6stheo thời gian bạn muốn. Bạn cũng có thể muốn chỉnh sửa thời gian trong lệnh gọi hàm bên dưới:

.emulateTransitionEnd(2000)

tại bootstrap.jschức năng Carousel.prototype.slide. Điều đó đồng bộ hóa quá trình chuyển đổi và ngăn trang trình bày phân tán trước khi quá trình chuyển đổi kết thúc.

CHỈNH SỬA 7/8/2014

Như @YellowShark đã chỉ ra rằng các chỉnh sửa trong JS không cần thiết nữa. Chỉ áp dụng các thay đổi css.

CHỈNH SỬA 20/8/2015 Bây giờ, sau khi bạn chỉnh sửa tệp css của mình, bạn chỉ cần chỉnh sửa CAROUSEL.TRANSITION_DURATION (trong bootstrap.js) hoặc c.TRANSITION_DURATION (nếu bạn sử dụng bootstrap.min.js) và thay đổi giá trị bên trong nó (600 cho mặc định). Giá trị cuối cùng phải giống với giá trị mà bạn đặt trong tệp css của mình (ví dụ: 10s trong css = 10000 trong .js)

CHỈNH SỬA 16/01/2018 Đối với Bootstrap 4, để thay đổi thời gian chuyển đổi thành ví dụ: 2 giây, hãy thêm

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

vào tệp JS của trang web của bạn và

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

vào tệp CSS của trang web của bạn.

Question 3

Chỉ cần viết data-intervalvào divbăng chuyền chứa:

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

Ví dụ lấy từ w3schools .

Question 4

Bạn cần đặt khoảng thời gian trong DIV chính dưới dạng thẻ khoảng thời gian dữ liệu. Nó sẽ hoạt động tốt và bạn có thể đưa ra thời gian khác nhau cho các trang trình bày khác nhau.

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

Question 5

Đối với Twitter Bootstrap 3:

Bạn phải thay đổi quá trình chuyển đổi CSS như được chỉ định trong câu trả lời khác:

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

Từ 0,6 giây đến 1,5 giây (ví dụ).

Nhưng ngoài ra, có một số Javascript để thay đổi. Trong bootstrap.js có một dòng:

.emulateTransitionEnd(600)

Điều này sẽ được thay đổi thành lượng mili giây tương ứng. Vì vậy, trong 1,5 giây, bạn sẽ thay đổi số thành 1500:

.emulateTransitionEnd(1500)

Question 6

Một điều tôi nhận thấy là Bootstrap 3 đang thêm các kiểu với cả a .6svà 0.6s. Vì vậy, bạn có thể cần xác định rõ ràng thời lượng chuyển đổi của mình như thế này (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

Với Bootstrap 4, chỉ cần sử dụng CSS này:

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

Thay đổi 3sthời hạn bạn chọn.

Question 8

vì tôi đã làm việc để thêm cái này vào cuối chế độ xem của mình:

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

nó cung cấp cho băng chuyền một khoảng thời gian là 8 giây

Question 9

Nếu bạn cần làm điều đó theo chương trình để thay đổi (ví dụ) tốc độ dựa trên các điều kiện nhất định trên có lẽ chỉ một trong nhiều băng chuyền, bạn có thể làm như sau:

Nếu Html như thế này:

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

JavaScript sẽ như thế này:

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

Thêm nhiều .css (...) để bao gồm các trình duyệt khác.

Question 10

sau khi bao gồm bootstrap.min.jshoặc giải nén, bạn chỉ có thể thêm khoảng thời gian làm tham số như bên dưới. jQuery("#numbers").carousel({'interval':900 });Nó hoạt động với tôi

Question 11

Nếu bạn không muốn thay đổi tệp js của bootstrap, bạn cũng có thể đưa trực tiếp giá trị mong muốn vào plugin jquery (bootsrap 3.3.6).

Tất nhiên, điều này yêu cầu băng chuyền được kích hoạt thủ công thông qua js, không phải trực tiếp thông qua thuộc tính data-ride.

Ví dụ:

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

Question 12

không cần bất kỳ mã bên ngoài nào chỉ cần sử dụng data-interval=""thuộc tính

thêm thông tin hãy truy cập getbootstrap

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

khi bạn muốn thay đổi tốc độ thay đổi "2500"

Question 13

Điều làm việc cho tôi là thay đổi khoảng thời gian trong bootstrap.js

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

Question 14

Để bổ sung cho các câu trả lời trước, sau khi chỉnh sửa tệp CSS, bạn chỉ cần chỉnh sửa CAROUSEL.TRANSITION_DURATION(trong bootstrap.js ) hoặc c.TRANSITION_DURATION(nếu bạn sử dụng bootstrap.min.js ) và thay đổi giá trị bên trong nó (600 cho mặc định). Giá trị cuối cùng phải giống giá trị mà bạn đặt trong tệp CSS của mình (ví dụ: 10 giây trong CSS = 10000 trong .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

Nếu bạn đang tìm cách chỉnh sửa tốc độ các trang chiếu vào và ra (không phải thời gian giữa các trang chiếu thay đổi được gọi là khoảng thời gian) cho bootstrap 3.3.5 | Sau khi tải các kiểu bootstrap CDN, hãy ghi đè các kiểu trong tập định kiểu css của riêng bạn bằng cách sử dụng các lớp sau. 1,5 là thời gian thay đổi.

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

}

sau đó, bạn sẽ cần thay thế hàm băng chuyền trong javascript. Để làm điều này, bạn sẽ ghi đè hàm bootstrap.min.js mặc định sau khi nó tải. (Theo tôi không phải là ý kiến hay nếu ghi đè trực tiếp các tệp bootstrap). vì vậy hãy tạo một mynewscript.js và tải nó sau bootstrap.min.js và thêm chức năng băng chuyền mới. Dòng duy nhất bạn muốn chỉnh sửa là dòng này, Carousel.TRANSITION_DURATION = 1500. 1500 là 1,5. Hi vọng điêu nay co ich.

    +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

Đối với bootstrap 4 với scss, bạn có thể ghi đè lên biến cấu hình $carousel-transition-durationcủa bạn _variables.scssnhư sau:

$carousel-transition-duration: 2s;

Hoặc đối với thời lượng riêng lẻ của phần tử, hãy đặt

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

của phần tử cụ thể của bạn trong css / scss của bạn.

Question 17

Tất cả băng chuyền

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

    </script>

Question 18

Trong CSS của bạn:

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

Hãy cẩn thận, thời gian được bao gồm trong khoảng dữ liệu được xác định cho băng chuyền.

Hy vọng nó giúp... :)

Question 19

Trong tệp main.js hoặc bootstrap.js của bạn, hãy thay đổi giá trị của 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'),
                }
            }
        });
    });

Mở rộng đoạn mã

Question 20

Nếu sử dụng mô-đun ngCarousel, hãy chỉnh sửa biến khoảng thời gian trong tệp @ ng-bootstrap / ng-bootstrap / carousel-config.js như sau:

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

Question 21

Thêm khoảng thời gian dữ liệu

data-interval="20000"