Vue.jsでサムネイル付きのカルーセルスライダーを実装する「vue-agile」

by kabanoki

HTML

<div id="app">
  <agile :autoplay="true" :autoplay-speed="5000">
		<div class="slide" v-for="n in 4">
			<h3>slide {{n}}</h3>
		</div>
	</agile>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/VueAgile.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/VueAgile.umd.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}


.agile__actions{
  margin-top: 20px
}
.agile__nav-button {
  background: transparent;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: 24px;
  transition-duration: .3s;
}
.agile__nav-button:hover {
  color: #888
}
.agile__dot{
  margin: 0 10px;
}
.agile__dot button{
  background-color: #eee;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  height: 10px;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  transition-duration: .3s;
  width: 10px;
}
#app .agile__dot--current button, 
#app .agile__dot:hover button{
  background-color: #888
}

#app .slide {
  align-items: center;
  color: #fff;
  display: flex;
  height: 300px;
  justify-content: center;
  background-color: #f1c40f;
}
.slide h3{
  font-size: 32px;
  font-weight: 300;
}

Vue

const VueAgile = window['VueAgile'];
new Vue({
  el: '#app',
  components: {
    'agile':VueAgile
  }
});