<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<br>
<h5>Category Menu </h1>
</div>
<div class="col-lg-12 no-pad scroller">
<div class="left-btn-scroller left-scroll ">
<i class="fas fa-chevron-left"></i>
</div>
<div class="right-btn-scroller right-scroll ">
<i class="fas fa-chevron-right"></i>
</div>
<div class="col-lg-12 no-pad btn-header-links padding-align top-adjust" id="scroll-div">
<button class="btn btn-danger btn-pin btn-bg1">Home</button>
<button class="btn btn-success btn-pin btn-bg2">Companies</button>
<button class="btn btn-info btn-pin btn-bg3">Livefeed</button>
<button class="btn btn-primary btn-pin btn-bg4 ">Filing Search</button>
<button class="btn btn-warning btn-pin btn-bg5">Market Data</button>
<button class="btn btn-danger btn-pin btn-bg6">Mutual Fund Search</button>
<button class="btn btn-success btn-pin btn-bg7">Ownership Search</button>
<button class="btn btn-info btn-pin btn-bg8">Watchlist</button>
<button class="btn btn-primary btn-pin btn-bg9 ">ESG News</button>
<button class="btn btn-warning btn-pin btn-bg10">Business News</button>
</div>
</div>
</div>
</div>
body{
font-family: 'Open Sans', sans-serif !important;
font-size: 14px;
}
/*scroller*/
.btn-header-links {
padding-top: 0;
padding-bottom: 0;
overflow-x: scroll;
display: inline-block;
white-space: nowrap;
transition: 1s ease;
}
.padding-align{
padding-left: 1em !important;
padding-right: 1em !important;
}
.top-adjust {
top: 1.9em;
}
.btn-header-links button {
border-radius: 8px;
}
/*scroller parent style*/
.scroller {
position: relative;
overflow: hidden;
margin-top: 0%;
}
/*left arrow styles*/
.left-btn-scroller {
position: absolute;
left: -2%;
top: 0.6em;
font-size: 22px;
color: #3f3f3f;
bottom: 0;
width: 55px;
height: 55px;
background-color: rgba(255, 255, 255, 0);
z-index: 1002;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, .16), 0 0 0 0 rgba(0, 0, 0, .12);
box-shadow: 0 0 0 0 rgba(0, 0, 0, .16), 0 0 0 0 rgba(0, 0, 0, .12);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/*right arrow styles*/
.right-btn-scroller {
position: absolute;
right: -2%;
top: 0.6em;
font-size: 22px;
color: #3f3f3f;
bottom: 0;
width: 55px;
cursor: pointer;
height: 55px;
background-color: rgba(255, 255, 255, 0);
border-radius: 50%;
z-index: 1002;
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, .16), 0 0 0 0 rgba(0, 0, 0, .12);
box-shadow: 0 0 0 0 rgba(0, 0, 0, .16), 0 0 0 0 rgba(0, 0, 0, .12);
display: flex;
align-items: center;
justify-content: center;
}
.opacity-0 {
opacity: 0;
}
/*********************/
/*button styles*/
.btn-pin {
border:0;
color:#3f3f3f;
font-weight: normal;
text-transform: capitalize;
-webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.16), 0 0 0 0 rgba(0,0,0,1);
box-shadow: 0 0 0 0 rgba(0,0,0,1), 0 0 0 0 rgba(0,0,0,1);
}
.btn-bg1 {
background-color: rgb(255, 255, 255) !important;
}
.btn-bg2 {
background-color: rgb(255, 255, 255) !important;
}
.btn-bg3 {
background-color: rgb(255, 255, 255) !important;
}
.btn-bg4 {
background-color: rgb(255, 255, 255) !important;
}
.btn-bg5 {
background-color: rgb(255, 255, 255) !important;
}
.btn-bg6 {
background-color: #ffffff !important;
}
.btn-bg7 {
background-color: #ffffff !important;
}
.btn-bg8 {
background-color: #ffffff !important;
}
.btn-bg9 {
background-color: #ffffff !important;
}
.btn-bg10 {
background-color: #ffffff !important;
}
/*mobile responsive*/
@media (max-width: 575.98px) {
.padding-align{
padding: 0 !important;
}
.top-adjust {
top: 3%;
}
.left-btn-scroller {
display: none;
}
.right-btn-scroller {
display: none;
}
}
$(function () {
//pin scrooler
$('.left-scroll').click(function (e) {
e.preventDefault();
var container = document.getElementById('scroll-div');
sideScroll(container, 'left', 25, 100, 10);
});
$('.right-scroll').click(function (e) {
e.preventDefault();
var container = document.getElementById('scroll-div');
sideScroll(container, 'right', 25, 100, 10);
})
})
function sideScroll(element, direction, speed, distance, step) {
scrollAmount = 0;
var slideTimer = setInterval(function () {
if (direction == 'left') {
element.scrollLeft -= step;
} else {
element.scrollLeft += step;
}
scrollAmount += step;
if (scrollAmount >= distance) {
window.clearInterval(slideTimer);
}
}, speed);
}
