"Multiple Text Horizontal Scroller "
Bootstrap 4.1.1 Snippet by srengkhorn

<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); }

Related: See More


Questions / Comments: