通过翻转图像抓住（bootstrap carousel）

Question

如果我将图像向左翻转，一切正常。如果我向右翻转，下一个图像不会爬到页面，但突然出现。应隐藏在左侧的图像是可以的，但是会出现白色字段代替图像。当我试着看看F12时，看着旋转木马一切正常！ 代码：

<div id="myCarousel" class="carousel slide" data-interval="" data-ride="">
    <div class="media-content-wrapper">
        <div class="carousel-inner">
            <?php $flag = true;
            foreach ($_images as $_image):
                if($flag):
                    $flag = false;?>
                    <div class="active item">
                <?php else:?>
                    <div class="item">
                <?php endif?>
                        <?php $imageLabel = $this->stripTags($_image['label']); ?>
                        <img class="img-responsive" alt="<?php echo $imageLabel; ?>" title="<?php echo $imageLabel; ?>"
                             src="<?php echo $this->helper('catalog/image')->init($_product, 'image', $_image['file']); ?>">
                    </div>
            <?php endforeach; ?>

        </div>

        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>

        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
    </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $("#myCarousel").swiperight(function() {
            $(this).carousel('prev');
        });
        $("#myCarousel").swipeleft(function() {
            $(this).carousel('next');
        });
    });
</script>

活动图像的样式：

@media not all, (-webkit-transform-3d)
bootstrap.min.css:10
.carousel-inner>.item {
    transition: transform .6s ease-in-out;
    backface-visibility: hidden;
    perspective: 1000;
}
bootstrap.min.css:10
.carousel-inner>.item {
    display: none;
    position: relative;
    -webkit-transition: .6s ease-in-out left;
    -o-transition: .6s ease-in-out left;
    transition: .6s ease-in-out left;
}
custom.css:9611
div {
    word-wrap: break-word;
}
bootstrap.min.css:10
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}
Inherited from div.carousel-inner
custom.css:9611
div {
    word-wrap: break-word;
}
Inherited from body.catalog-product-view.product-all-around-town-tour-vip-all-access-pass.categorypath-day-trips-html.category-day-trips
bootstrap.min.css:10
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
custom.css:19
html, body {
    -webkit-font-smoothing: antialiased;
}
custom.css:7
html, body, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
Inherited from html.js.flexbox.flexboxlegacy.canvas.canvastext.webgl.no-touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.generatedcontent.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths
bootstrap.min.css:10
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
bootstrap.min.css:10
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
custom.css:19
html, body {
    -webkit-font-smoothing: antialiased;
}
custom.css:7
html, body, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
Pseudo ::before element
bootstrap.min.css:10
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Pseudo ::after element
bootstrap.min.css:10
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

预活动图像的样式：

对不起照片，很难获得代码。 提前致谢