请帮助我解决您已经遇到的问题。我花了两天时间寻找并使用每种建议的方法，但仍然失败：这是我的html轮播代码。将类别active应用于carousel-item。
<div class="block block-bordered-lg pl-0 pt-0 pr-0">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
您可以看到，这是我根据建议的注释进行的更改。
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
此javascript：
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.6';
Carousel.TRANSITION_DURATION = 600;
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;
}
问题出在您的方法getItemForDirection中。
Case： wrap=true，direction=prev和activeIndex=0：
[(activeIndex + delta) % this.$items.length将返回-1。
请按如下所述更新此逻辑以解决此问题。
(this.$items.length + activeIndex + delta) % this.$items.length