显示布尔玛旋转木马中的所有图像

时间:2019-07-29 07:46:15

标签: carousel bulma

我正在使用bulma-carousel来显示一张包含三个图像的幻灯片,它以滑块的形式(并排)显示全部三个图像,并且可以将它们更改为活动状态,但是“ ”也会显示图像。

<section class="section">
    <div class="container">
        <div id="post_images" class="carousel">
            <div class="item-1">
                <figure class="image is-16by9 has-ratio">
                    <img src="path/to/image"/>
                </figure>
            </div>
            <div class="item-2">
                <figure class="image is-16by9 has-ratio">
                    <img src="path/to/image"/>
                </figure>
            </div>
            <div class="item-3">
                <figure class="image is-16by9 has-ratio">
                    <img src="path/to/image"/>
                </figure>
            </div>
        </div>
    </div>
</section>
<script>
   bulmaCarousel.attach('#post_images', {
      slidesToScroll: 1,
      slidesToShow: 1,
      loop: true,
    });
</script>

我做了这个Codepen example

1 个答案:

答案 0 :(得分:1)

解决了:

.carousel {
  overflow: hidden;
}