Vue

by Kristian Jabilles

HTML

<div id="app">
    <div class='wrap'>
      <ul class='carousel is-set'>
        <li class='carousel-seat' v-for="(item, index) in slides" :key="index" :class="{'is-ref' : slides.length === index + 1}">
          <button>{{item.label}}</button>
        </li>
      </ul>
    </div>
<!--     <div class='controls'>
      <button class='toggle' @click="prev">Prev</button>
      <button class='toggle' data-toggle='next' @click="next">Next</button>
    </div> -->
</div>

SCSS

.wrap {
    overflow: auto;
    width: 400px;
    
    &::-webkit-scrollbar {
      width: 0px;
      background: transparent;
    }
  }
  
  .carousel {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  
  .carousel-seat {
    width: auto;
    margin-right: 8px;
    text-align: center;
    order: 2;
  }
  
  button {
    background: #eee;
    width: 100%;
  }

Vue

new Vue({
  el: "#app",
  data: {
    slides: [
      {
        label: 'All Exclusive Credit Cards',
        slug: 'all-exclusive'
      },
      {
        label: 'Air Miles',
        slug: 'air-miles'
      },
      {
        label: 'Cashback',
        slug: 'cashback'
      },
      {
        label: 'Petrol',
        slug: 'petrol'
      },
      {
        label: 'Dining',
        slug: 'dining'
      },
      {
        label: 'Shopping',
        slug: 'shopping'
      },
      {
        label: 'Overseas Spending',
        slug: 'overseas-spending'
      },
      {
        label: 'Grocery',
        slug: 'grocery'
      },
      {
        label: 'Overseas Shopping',
        slug: 'overseas-shopping'
      },
      {
        label: 'No Anual Fee',
        slug: 'no-annual-fee'
      },
      {
        label: 'Rewards',
        slug: 'rewards'
      },
      {
        label: 'Promotions',
        slug: 'promotions'
      },
    ],
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})