<div id="app" class="container">
<div class="row">
<div class="col-md-12">
<h1>Horizontal Timeline with Swiper</h1>
Credit :
<ul>
<li>Horizontal timeline CSS based on <a href="https://codepen.io/abhisharma2/pen/vEKWVo">https://codepen.io/abhisharma2/pen/vEKWVo</a> with a few modifications.</li>
<li>Website development step <a href="https://xbsoftware.com/blog/website-development-process-full-guide/">https://xbsoftware.com/blog/website-development-process-full-guide/</a></li>
<li>Swiper Grab Cursor <a href="http://idangero.us/swiper/demos/12-grab-cursor.html">http://idangero.us/swiper/demos/12-grab-cursor.html</a></li>
</ul>
<div class="swiper-container">
<p class="swiper-control">
<button type="button" class="btn btn-default btn-sm prev-slide">Prev</button>
<button type="button" class="btn btn-default btn-sm next-slide">Next</button>
</p>
<div class="swiper-wrapper timeline">
<!-- <div class="swiper-slide" v-for="item in steps">
<div class="timestamp">
<span class="date">{{item.dateLabel}}<span>
</div>
<div class="status">
<span>{{item.title}}</span>
</div>
</div> -->
<div class="swiper-slide">
<div class="timestamp">
<span class="date">April 2017<span>
</div>
<div class="status">
<span>This is Title</span>
</div>
</div>
<div class="swiper-slide">
<div class="timestamp">
<span class="date">May 2017<span>
</div>
<div class="status">
<span>This is Second Title</span>
</div>
</div>
<div class="swiper-slide">
<div class="timestamp">
<span class="date">June 2017<span>
</div>
<div class="status">
<span>This is Third Title</span>
</div>
</div>
<div class="swiper-slide">
<div class="timestamp">
<span class="date">July 2017<span>
</div>
<div class="status">
<span>This is Fourth Title</span>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
const data = [
{ dateLabel: 'January 2017', title: 'Gathering Information' },
{ dateLabel: 'February 2017', title: 'Planning' },
{ dateLabel: 'March 2017', title: 'Design' },
{ dateLabel: 'April 2017', title: 'Content Writing and Assembly' },
{ dateLabel: 'May 2017', title: 'Coding' },
{ dateLabel: 'June 2017', title: 'Testing, Review & Launch' },
{ dateLabel: 'July 2017', title: 'Maintenance' }
];
new Vue({
el: '#app',
data: {
steps: data,
},
mounted() {
var swiper = new Swiper('.swiper-container', {
//pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
grabCursor: true,
paginationClickable: true,
nextButton: '.next-slide',
prevButton: '.prev-slide',
});
}
})