Question

我在drupal平台上实现了bootstrap 4轮播功能。该转盘在chrome上运行良好，但在野生动物园中，该转盘会过渡到下一张幻灯片，但会闪烁一次，然后继续到下一张幻灯片（有固定的间隔时间）。最初我以为它与B4淡入淡出类有关，所以我删除了它，但闪烁仍在发生。我希望我可以添加一个视频来向您展示它的外观，但是此说明现在就可以了。以下是html css和js的代码段。有已知的方法可以解决故障吗？

谢谢！

杰玛

<!--bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!--Boostrap JS-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<style>

    /* CUSTOMIZE THE CAROUSEL
    -------------------------------------------------- */

    /* Carousel base class */
    .carousel {
        margin-bottom: 4rem;
    }
    /* Since positioning the image, we need to help out the caption */
    .carousel-caption p {
        z-index: 10;
        bottom: 3rem;
        color: black;
    }

    /* Declare heights because of positioning of img element */
    .carousel-item {
        height: 16rem;
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        height: 100px;
        width: 100px;
        outline: black;
        background-image: none;
    }

    .carousel-control-next-icon:after
    {
        content: '\25b6';
        font-size: 55px;
        color: black;
        /*font-weight: bold;*/
        font-family: "Trebuchet MS", Helvetica, sans-serif;
    }

    .carousel-control-prev-icon:after {
        content: '\25C0';
        font-size: 55px;
        color: black;
        /*font-weight: bolder;*/
        font-family: "Trebuchet MS", Helvetica, sans-serif;
    }

    /* Changes the color of the indicators */
    #myCarousel .carousel-indicators li
    {
        background: #808080;

    }
    #myCarousel .carousel-indicators .active
    {
        background: #333333;

    }
    .carousel-indicators
    {
        margin-bottom: -20px;

    }

    .title{
        font-size: 25px;
        font-style: italic;
    }
</style>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <div class="container">
                <div class="carousel-caption d-none d-md-block">
                    <p class="title">Title</p>
                    <p>Thursday, November 29, 2018</p>
                    <a href=" " target="__blank"><button class="btnCarousel">Learn More</button></a>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="container">
                <div class="carousel-caption d-none d-md-block">
                    <p class="title">Title</p>
                    <p>Thursday, November 29, 2018 - 11:00am to 1:30pm</p>
                    <a href=" " target="__blank"><button class="btnCarousel">Learn More</button></a>
                </div>
            </div>
        </div>
    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<script>
    // When the DOM is ready, run this function
    $(document).ready(function() {
        //Set the carousel options
        $('#myCarousel').carousel({
            pauseOnHover: true,
            interval: 5000
        });
    });

</script>

Answer 1

在朋友的帮助下，这种闪烁的不太明显的解决方案是简单地添加

-webkit-transform：translateZ（0）; -moz-transform：translateZ（0）;

进入容器内部的容器的css中。不确定为什么可以解决野生动物园中的小故障，但是可以解决问题！

Answer 2

在Custom.css或style.css中添加CSS

body{
   overflow-x: hidden;
   -webkit-transform: translateZ(0); 
  -moz-transform: translateZ(0);
}

Answer 3

解决了闪烁问题（但幻灯片从右到左的动画不起作用-幻灯片只出现了）：

.carousel-item {
-webkit-transform: translateZ(0); -moz-transform: translateZ(0); 
}

Safari浏览器转换期间，Bootstrap 4 Carousel闪烁

3 个答案: