<link href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container has-border"> <div class="is-multi-carousel"> <div class="columns is-multi-carousel is-3"> <div class="column is-one-quarter"> is-one-quarter </div> <div class="column is-one-quarter"> is-one-quarter </div> <div class="column is-one-quarter"> is-one-quarter </div> <div class="column is-one-quarter"> is-one-quarter </div> <div class="column is-one-quarter"> is-one-quarter </div> <div class="column is-one-quarter"> is-one-quarter </div> <div class="column is-one-quarter"> is-one-quarter </div> <div class="column is-one-quarter"> is-one-quarter </div> <div class="column is-one-quarter"> is-one-quarter </div> <div class="column is-one-quarter"> is-one-quarter </div> </div> </div> </div>

.is-multi-carousel { overflow:hidden; } /* .is-multi-carousel .is-multi-carousel-inner { transition: 1s ease all; float: left; } .is-multi-carousel .is-multi-carousel-inner .item { float: left;} .is-multi-carousel .is-multi-carousel-inner .item > div { text-align: center; padding:10px; margin:10px; background:#f1f1f1; color:#666;} .is-multi-carousel .leftLst, .is-multi-carousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); } .is-multi-carousel .leftLst { left:0; } .is-multi-carousel .rightLst { right:0; } .is-multi-carousel .leftLst.over, .is-multi-carousel .rightLst.over { pointer-events: none; background:#ccc; } */ .has-border { border: 1px solid black; min-height: 300px; } .column { background-color: #ccc; }