問題復(fù)現(xiàn)
首先復(fù)制官方代碼畦娄，可以顯示輪播圖又沾。
image.png
但是出現(xiàn)的情況是,點(diǎn)擊右上角的切換下一張，直接切換了兩張輪播圖熙卡。
問題跟蹤
chrome 瀏覽器F12加斷點(diǎn)杖刷。首先已知這個系統(tǒng)自帶的輪播圖插件是基于bootstrap的，打開這個js再膳，然后搜索carousel
在407行挺勿，找到如下代碼
Carousel.prototype.next = function () {
if (this.sliding) return
return this.slide('next')
}
如果判斷為真曲横，直接返回喂柒。否則，進(jìn)入this.slide('next')
斷點(diǎn)進(jìn)入方法。417行
Carousel.prototype.slide = function (type, next) {
...
...
//這里把sliding設(shè)置為true，那么407的方法應(yīng)該直接return的誊薄，而斷點(diǎn)時發(fā)現(xiàn)蒸绩，那里為false，
//所以重點(diǎn)關(guān)注這個值
this.sliding = true
...
var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
if ($.support.transition && this.$element.hasClass('slide')) {
//如果進(jìn)入這個代碼塊啡莉，未更改sliding的值，依然為true
$next.addClass(type)
if (typeof $next === 'object' && $next.length) {
$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')
//如果進(jìn)入這個代碼塊，則重置為false
this.sliding = false
this.$element.trigger(slidEvent)
}
isCycling && this.cycle()
return this
}
觀察代碼昭娩，如果進(jìn)入else，407行的this.sliding為false黍匾。而根據(jù)斷點(diǎn)調(diào)試栏渺，的卻進(jìn)入了else分支。
觀察if判斷
if ($.support.transition && this.$element.hasClass('slide'))
斷點(diǎn)發(fā)現(xiàn)&&前為true锐涯，也即&&后的判定磕诊，我們要把他改為true，這里判定了element是否有slide class。
解決問題
為這個element設(shè)置slide的class霎终，問題解決
echo Carousel::widget([
'items' => $slides,
'options'=>['class'=>'slide']
]);
深入研究
斷點(diǎn)跟蹤框架中的Carousel控件滞磺，它根據(jù)options參數(shù)來設(shè)置class屬性，而代碼中的卻沒有默認(rèn)設(shè)置slide的class莱褒。
問題已經(jīng)解決击困，但是為什么會出現(xiàn)這種問題就很費(fèi)解了。
