Angularjs - Horizontal scroll upon button click

Question

How to do horizontal scroll on click with right and left arrow.

<div ng-controller="TabsDemoCtrl">
<button class="btn-sm btn-default glyphicon glyphicon-chevron-left" style="float: left; margin-top: 22px" ng-click="horizontalScroll()"></button>
  <uib-tabset active="active">
    <uib-tab index="0" heading="Static title">Static content</uib-tab>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
      {{tab.content}}
    </uib-tab>
  </uib-tabset>
<button class="btn-sm btn-default glyphicon glyphicon-chevron-right" style="float: right; margin-top: 22px;  right: 0px; position: absolute"  ng-click="horizontalScroll()"></button>
</div>

Here i created with tabs and buttons using sample tutorial. Attached the link

Please help me to fix this.

so do you want to switch to next tab when you click right button and prev when you click left ? — ProllyGeek, Commented May 7, 2016 at 18:15
No when i click right button tab should move towards right and same to the left @ProllyGeek.And sorry for the delay. — htoniv, Commented May 7, 2016 at 19:22
see the sample fiddle that i did in the vanilla javascript link like wise i need. — htoniv, Commented May 7, 2016 at 19:27
im sorry what do you mean by move ? you just need the tabs to scroll ? — ProllyGeek, Commented May 7, 2016 at 19:38
please see the link here. same thing i need it in angular-bootstrap-ui — htoniv, Commented May 7, 2016 at 20:08

Shubham Takode · Accepted Answer · 2016-08-05 13:35:35Z

0

use <scrollable-tabset> Its available on GitHub https://github.com/VersifitTechnologies/angular-ui-tab-scroll

answered Aug 5, 2016 at 13:35

Shubham Takode

5331 gold badge8 silver badges24 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Angularjs - Horizontal scroll upon button click

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related