4

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.

htoniv
  • 1,658
  • 21
  • 40
  • so do you want to switch to next tab when you click right button and prev when you click left ? – ProllyGeek May 07 '16 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 May 07 '16 at 19:22
  • see the sample fiddle that i did in the vanilla javascript [link](https://jsfiddle.net/htoniv/tbj5p93x/) like wise i need. – htoniv May 07 '16 at 19:27
  • im sorry what do you mean by move ? you just need the tabs to scroll ? – ProllyGeek May 07 '16 at 19:38
  • please see the link [here](http://jsfiddle.net/jbrosi/c6kf2/). same thing i need it in angular-bootstrap-ui – htoniv May 07 '16 at 20:08

1 Answers1

0

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

Shubham Takode
  • 525
  • 8
  • 24