<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>Multiple Text Horizontal Scroller </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">Product</button>
<button class="btn btn-success btn-pin btn-bg2">Showroom</button>
<button class="btn btn-info btn-pin btn-bg3">Catalogs</button>
<button class="btn btn-primary btn-pin btn-bg4 ">Site Photos</button>
<button class="btn btn-warning btn-pin btn-bg5">360 Photos of Showroom</button>
<button class="btn btn-danger btn-pin btn-bg6">Product</button>
<button class="btn btn-success btn-pin btn-bg7">Showroom</button>
<button class="btn btn-info btn-pin btn-bg8">Catalogs</button>
<button class="btn btn-primary btn-pin btn-bg9 ">Site Photos</button>
<button class="btn btn-warning btn-pin btn-bg10">360 Photos of Showroom</button>
</div>
</div>
</div>
</div>
body{
font-family: 'Open Sans', sans-serif !important;
font-size: 14px;
}
/*scroller*/
.btn-header-links {
padding-top: 5px;
padding-bottom: 15px;
overflow-x: scroll;
display: inline-block;
white-space: nowrap;
transition: 1s ease;
}
.padding-align{
padding-left: 4em !important;
padding-right: 4em !important;
}
.top-adjust {
top: 1.4em;
}
.btn-header-links button {
border-radius: 8px;
}
/*scroller parent style*/
.scroller {
position: relative;
overflow: hidden;
margin-top: -0.5%;
}
/*left arrow styles*/
.left-btn-scroller {
position: absolute;
left: 0%;
top: 0.6em;
font-size: 22px;
color: #3f3f3f;
bottom: 0;
width: 55px;
height: 55px;
background-color: rgba(242, 242, 242, 0.94);
z-index: 1002;
border-radius: 50%;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 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: 0%;
top: 0.6em;
font-size: 22px;
color: #3f3f3f;
bottom: 0;
width: 55px;
cursor: pointer;
height: 55px;
background-color: rgba(242, 242, 242, 0.94);
border-radius: 50%;
z-index: 1002;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 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:#fff;
font-weight: normal;
text-transform: capitalize;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
.btn-bg1 {
background-color: rgb(53, 35, 28) !important;
}
.btn-bg2 {
background-color: rgb(170, 114, 92) !important;
}
.btn-bg3 {
background-color: rgb(59, 59, 59) !important;
}
.btn-bg4 {
background-color: rgb(154, 188, 160) !important;
}
.btn-bg5 {
background-color: rgb(220, 107, 97) !important;
}
.btn-bg6 {
background-color: #7F6364 !important;
}
.btn-bg7 {
background-color: #142935 !important;
}
.btn-bg8 {
background-color: #9C0001 !important;
}
.btn-bg9 {
background-color: #9E8462 !important;
}
.btn-bg10 {
background-color: #3B78C1 !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);
}
