Create horizontal spiral ionic / angular

Question

I tried to create the following scroll navigation using ionic, but for some reason the navigation does not work, and the style is not quite right. Can someone help / guide me on what to use? I want it, I want:

This is what I still have, a horizontal scroll list, but the above looks more like a navigation bar, the item moves to the center when you touch / select it.

When the first item is active, the left side of the list should remain empty. They should scroll like navigation. So far I have a horizontal list, but scrolling the active center to the center does not work.

 <ion-scroll direction="x" class="wide-as-needed">
  <div ng-repeat="type in types" style='display: inline-block; margin: 5px;' >
    <a href="" id="anchor{{type}}" scroll-to="anchor{{type}}" class="button inline-button button-clear button-dark">{{type|uppercase}}</a>
  </div>
</ion-scroll>

Directive

- , , , : https://docs.angularjs.org/api/ng/service/$anchorScroll angular $anchorScroll ...

TabbedSlideBox , ,

Answer 1

. .

http://demo.jankuri.com/ngSlimscroll/

.

function center() {
    var currentElement = document.getElementById("active");
    currentElement.className = "center-menu";
    var nav = document.getElementById("nav");
    var navWidth = document.getElementById("nav2").offsetWidth;
    var margin = 0;
    for(var i =0; i<nav.children.length; i++){

        if(currentElement == nav.children[i]){
            console.log(nav.children[i]);
            break;
        }else {
            margin += nav.children[i].offsetWidth;
        }
    }
    nav.style.marginLeft = (navWidth/2 - margin - currentElement.offsetWidth);
}

CSS

nav {
  background: #9df0e8;
  overflow: hidden;
  border-bottom: 8px solid #40b5a2; 
  border-top: 2px solid #40b5a2;
  width: 80%;
  margin: 0 auto;
}

nav ul { margin: 0 0 2em;
margin-right:-999em;
white-space:nowrap; }

nav ul li { float: left; }

nav ul li a,
nav ul li span {
  display: block;
  background: #9df0e8;
  color: #345661;
  text-decoration: none;
  padding: 1em;
  cursor: pointer;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
}

nav ul li a:hover,
nav ul li span:hover { background: #40b5a2; }

.arrow{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #9df0e8 transparent transparent transparent;
    display: none;
    position: absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}
.center-menu .arrow{display: block;}