<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></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"> <div class="row"> <div class="new-arrival"> <div class="titlebar"> <div class="next-back"> <span><a data-slide="prev" href="#Carousel" class="left carousel-control">Back</a></span> <span><a data-slide="next" href="#Carousel" class="right carousel-control">Next</a></span> </div> </div> <div class="arrival-product"> <div id="Carousel" class="carousel slide" data-ride="carousel"> <!-- Carousel items --> <div class="carousel-inner"> <div class="carousel-item active"> <div class="arrival-item"> <Ul> <li><a href="#"><img src="http://placehold.jp/300x350.png" alt="Image" style="max-width:100%;"></a></li> <li><a href="#"><img src="http://placehold.jp/300x350.png" alt="Image" style="max-width:100%;"></a></li> <li><a href="#"><img src="http://placehold.jp/300x350.png" alt="Image" style="max-width:100%;"></a></li> <li><a href="#"><img src="http://placehold.jp/300x350.png" alt="Image" style="max-width:100%;"></a></li> </Ul> </div> </div> <div class="carousel-item"> <div class="arrival-item"> <Ul> <li><a href="#"><img src="http://placehold.jp/300x350.png" alt="Image" style="max-width:100%;"></a></li> <li><a href="#"><img src="http://placehold.jp/300x350.png" alt="Image" style="max-width:100%;"></a></li> <li><a href="#"><img src="http://placehold.jp/300x350.png" alt="Image" style="max-width:100%;"></a></li> <li><a href="#"><img src="http://placehold.jp/300x350.png" alt="Image" style="max-width:100%;"></a></li> </Ul> </div> </div> <div class="carousel-item"> <div class="arrival-item"> <Ul> <li><a href="#"><img src="http://placehold.jp/300x350.png" alt="Image" style="max-width:100%;"></a></li> <li><a href="#"><img src="http://placehold.jp/300x350.png" alt="Image" style="max-width:100%;"></a></li> <li><a href="#"><img src="http://placehold.jp/300x350.png" alt="Image" style="max-width:100%;"></a></li> <li><a href="#"><img src="http://placehold.jp/300x350.png" alt="Image" style="max-width:100%;"></a></li> </Ul> </div> </div> </div> </div> <!--Carousel--> </div> </div> </div> </div>

.titlebar { overflow: hidden; } .titlebar .next-back { float: right; margin: 12px 0; } .titlebar .next-back span a { font-size: 12px; text-transform: uppercase; font-family: Poppins; color: #222222; } .titlebar .next-back span a:hover { text-decoration: none; color: #888888; } .titlebar .next-back span { border-right: 1px solid #000; padding: 0 8px 0 5px; display: inline-block; line-height: 10px; } .titlebar .next-back span:last-child { border-right: none; padding-right: 0; } /*.carousel-inner > .carousel-item {*/ /* -webkit-transition: -webkit-transform 1.2s ease-in-out !important;*/ /* -o-transition: -o-transform 1.2s ease-in-out !important;*/ /* transition: transform 1.2s ease-in-out !important;*/ /*}*/ .carousel { margin-bottom: 0; padding: 0 0 30px 0; } .arrival-product .arrival-item ul { margin: 0; padding: 0; } .arrival-product .arrival-item ul li { float: left; list-style: none; width: 23%; overflow: hidden; margin-right: 2.6%; } .arrival-product .arrival-item ul li:last-child { margin-right: 0; }