Icon box sliders are a quick way to add visuals to functional navigation.
For detailed instruction's, view Solodev's How to Make an Icon Box Slider for Quick Navigation article.
Try out a working example on JSFiddle.
The tutorial contains the following basic HTML markup.
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="h2 font-weight-bold text-uppercase text-center my-5">Our Services</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="carousel box-carousel d-none d-sm-block">
<div class="box">
<a href="https://www.solodev.com/" ><i class="fa fa-3x fa-laptop" aria-hidden="true"></i><br>Web Design</a>
</div>
<div class="box">
<a href="https://www.solodev.com/product/host.stml" ><i class="fa fa-3x fa-cloud" aria-hidden="true"></i><br>Cloud Hosting</a>
</div>
<div class="box">
<a href="https://www.solodev.com/" ><i class="fa fa-3x fa-users" aria-hidden="true"></i><br>WXP</a>
</div>
<div class="box">
<a href="https://www.solodev.com/product/engage.stml" ><i class="fa fa-3x fa-line-chart" aria-hidden="true"></i><br>Marketing</a>
</div>
<div class="box">
<a href="https://www.solodev.com/product/engage.stml"><i class="fa fa-3x fa-code" aria-hidden="true"></i><br>SEO</a>
</div>
<div class="box">
<a href="https://www.solodev.com/" ><i class="fa fa-3x fa-laptop" aria-hidden="true"></i><br>Web Design</a>
</div>
<div class="box">
<a href="https://www.solodev.com/product/host.stml" ><i class="fa fa-3x fa-cloud" aria-hidden="true"></i><br>Cloud Hosting</a>
</div>
<div class="box">
<a href="https://www.solodev.com/" ><i class="fa fa-3x fa-users" aria-hidden="true"></i><br>WXP</a>
</div>
<div class="box">
<a href="https://www.solodev.com/product/engage.stml" ><i class="fa fa-3x fa-line-chart" aria-hidden="true"></i><br>Marketing</a>
</div>
<div class="box">
<a href="https://www.solodev.com/product/engage.stml"><i class="fa fa-3x fa-code" aria-hidden="true"></i><br>SEO</a>
</div>
</div><!-- carousel-->
</div><!--col-->
</div><!--row-->
<div class="carousel-mobile box-carousel-mobile d-block d-sm-none">
<div class="row d-flex justify-content-center">
<div class="col-xs-6">
<div class="box">
<a href="https://www.solodev.com/" ><i class="fa fa-3x fa-laptop" aria-hidden="true"></i><br>Web Design</a>
</div>
<div class="box">
<a href="https://www.solodev.com/product/host.stml" ><i class="fa fa-3x fa-cloud" aria-hidden="true"></i><br>Cloud Hosting</a>
</div>
<div class="box">
<a href="https://www.solodev.com/" ><i class="fa fa-3x fa-users" aria-hidden="true"></i><br>WXP</a>
</div>
</div><!-- col-->
<div class="col-xs-6">
<div class="box">
<a href="https://www.solodev.com/" ><i class="fa fa-3x fa-laptop" aria-hidden="true"></i><br>Web Design</a>
</div>
<div class="box">
<a href="https://www.solodev.com/product/host.stml" ><i class="fa fa-3x fa-cloud" aria-hidden="true"></i><br>Cloud Hosting</a>
</div>
<div class="box">
<a href="https://www.solodev.com/" class="more-links">More Quick Links</a>
</div>
</div><!-- col-->
</div>
</div>
</div><!-- container-->
All required CSS is contained with icon-box-slider.css
This tutorial includes the following third party resources.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent