<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 ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<div class="catering-newstyle catering-slider-thumb">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4">
<div class="oveerlay-slider">
<div class="section-title">
<h2>We Do All Types of Events</h2>
<p>At Shah’s Halal Food we can provide our mobile food carts and trucks for events of all types. If you’re looking to hire a vendor for catering at your next event then look no further.</p>
</div>
<div class="vertical-slider">
<div class="slider-galeria-thumbs">
<div>
<div class="cate-thumb">
<img src="https://www.shahshalalfood.com/wp-content/uploads/2022/11/cate-ico-1.png" alt="" />
<span>School Events</span>
</div>
</div>
<div>
<div class="cate-thumb">
<img src="https://www.shahshalalfood.com/wp-content/uploads/2022/11/cate-ico-2.png" alt="" />
<span>Weddings</span>
</div>
</div>
<div>
<div class="cate-thumb">
<img src="https://www.shahshalalfood.com/wp-content/uploads/2022/11/cate-ico-3.png" alt="" />
<span>Eid Parties</span>
</div>
</div>
<div>
<div class="cate-thumb">
<img src="https://www.shahshalalfood.com/wp-content/uploads/2022/11/cate-ico-4.png" alt="" />
<span>Corporate</span>
</div>
</div>
<div>
<div class="cate-thumb">
<img src="https://www.shahshalalfood.com/wp-content/uploads/2022/11/cate-ico-5.png" alt="" />
<span>Special Events</span>
</div>
</div>
<div>
<div class="cate-thumb">
<img src="https://www.shahshalalfood.com/wp-content/uploads/2022/11/cate-ico-6.png" alt="" />
<span>Birthday Parties</span>
</div>
</div>
</div>
</div>
<div class="mt-2">
<a href="https://www.shahshalalfood.com/catering/" class="black-btn common-btn">Read More</a>
</div>
</div>
</div>
<div class="col-md-8">
<div class="right-slide-cate">
<div class="slider-galeria">
<div>
<div class="img-cate-lg"><img src="https://www.shahshalalfood.com/wp-content/uploads/2023/01/catering-right-full-1.jpg" alt="" /></div>
</div>
<div>
<div class="img-cate-lg"><img src="https://www.shahshalalfood.com/wp-content/uploads/2023/01/catering-right-full-2.jpg" alt="" /></div>
</div>
<div>
<div class="img-cate-lg"><img src="https://www.shahshalalfood.com/wp-content/uploads/2023/01/catering-right-full-3.jpg" alt="" /></div>
</div>
<div>
<div class="img-cate-lg"><img src="https://www.shahshalalfood.com/wp-content/uploads/2023/04/corporate.jpg" alt="" /></div>
</div>
<div>
<div class="img-cate-lg"><img src="https://www.shahshalalfood.com/wp-content/uploads/2023/01/catering-right-full-5.jpg" alt="" /></div>
</div>
<div>
<div class="img-cate-lg"><img src="https://www.shahshalalfood.com/wp-content/uploads/2023/04/birthday.jpg" alt="" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
.cate-thumb{
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 6px 15px;
border-radius: 3px;
overflow: hidden;
background: #ee1d24;
}
.cate-thumb *{
position: relative;
z-index: 9;
}
.cate-thumb::after{
transition: .3s all ease-in-out;
-webkit-transition: .3s all ease-in-out;
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
content: "";
transform: translateX(-100%);
left: 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffc60d+0,f04722+100 */
background: rgb(255,198,13); /* Old browsers */
background: -moz-linear-gradient(left, rgba(255,198,13,1) 0%, rgba(240,71,34,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,198,13,1) 0%,rgba(240,71,34,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,198,13,1) 0%,rgba(240,71,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc60d', endColorstr='#f04722',GradientType=1 ); /* IE6-9 */
}
.catering-slider-thumb .slick-current .cate-thumb::after{
transform: translateX(0);
}
.cate-thumb img{
width: 40px;
margin-right: 10px;
filter: brightness(0) grayscale(0) invert(1);
}
.cate-thumb span{
color: #fff;
font-size: 20px;
}
.catering-slider-thumb{
padding: 60px 0;
background: #f1f1f1;
}
.catering-slider-thumb .slick-slide{
padding: 3px 0px;
margin: 0;
border: 0;
}
.oveerlay-slider{
background: rgba(255, 255, 255, 0.98);
padding: 40px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 11%);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.11);
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 11%);
width: calc(100% + 180px);
margin-right: -120px;
position: relative;
z-index: 99;
}
.oveerlay-slider .section-title{
margin-bottom: 20px;
}
$('.slider-galeria').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
autoplay: true,
useTransform: false,
asNavFor: '.slider-galeria-thumbs',
});
$('.slider-galeria-thumbs').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: true,
asNavFor: '.slider-galeria',
arrows: false,
vertical: true,
focusOnSelect: true,
});
