<div class="intro">
		<h1>Swipeable Tabs</h1>
		<p>[Android - Material Design]</br>made by <a href="https://github.com/nolimits4web/Swiper">swiperjs</p>
	</div>
	<div class="swiper-container">
		<!-- Add Pagination -->
		<div class="swiper-pagination">
		</div>
		<div class="swiper-wrapper">
			<div class="swiper-slide">Tab 1</div>
			<div class="swiper-slide">Tab 2</div>
			<div class="swiper-slide">Tab 3</div>
			<div class="swiper-slide">Tab 4</div>
		</div>
	</div>

// variables
$num-of-tabs: 4;
$tabs-header-width: 100% / $num-of-tabs;

@mixin tabs {
	@for $i from 1 through $num-of-tabs {
		&:nth-of-type(#{$i}) {
			&.swiper-pagination-bullet-active {
				~ .active-mark {
					left: $tabs-header-width * ($i - 1);
				}
			}
		}
	}
}

:root {
	box-sizing: border-box;
	font-size: 62.5%;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	background-color: #745E73;
	color: #fff;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
}

.intro {
	text-align: center;

	h1 {
		color: #EFEFEF;
		font-size: 3rem;
		margin: 60px 0 0;
		font-weight: bold;
		font-family: monospace;

		@media screen and (min-width: 800px) {
			font-size: 4rem;
		}
	}

	p {
		color: #E0CF79;
		font-size: 1.3rem;
		line-height: 1.5;
	}

	a {
		color: #40DFBB;
		font-weight: bold;
		text-decoration: none;
	}
}

.swiper-container {
	width: 100%;
	height: 100%;
	margin: 50px auto 0;

	@media screen and (min-width: 800px) {
		width: 70%;
		margin-left: 15%;
	}
}

.swiper-slide {
	background: #fff;
	color: #333;
	font-size: 1.8rem;
	min-height: 300px;

	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.swiper-container-horizontal {
	> .swiper-pagination {
		top: 0;
		bottom: auto;

		.swiper-pagination-bullet {
			margin: 0;
		}
	}
}

.active-mark {
	background: #ffeb3b;
	width: $tabs-header-width;
	height: 4px;
	position: absolute;
	left: 0;
	top: 52px;
	transition: left 0.2s ease-out;
}

.swiper-pagination-bullet {
	background-color: #00D42B;
	border-radius: 0;
	box-sizing: border-box;
	color: rgb(14, 137, 39);
	cursor: pointer;
	font-size: 1.6rem;
	font-weight: normal;
	opacity: 1;
	height: 56px;
	width: $tabs-header-width;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	text-align: center;
	transition: font-weight 0.22s ease;

	@include tabs;
	&:first-of-type {
		&.swiper-pagination-bullet-active {
			~ .active-mark {
				left: 0;
			}
		}
	}
}

.swiper-pagination-bullet-active {
	font-weight: bold;
}
View Compiled
var swiper = new Swiper('.swiper-container', {
			pagination: '.swiper-pagination',
			slidesPerView: 1,
			paginationClickable: true,
			loop: true,
       		paginationBulletRender: function (index, className) {
				var tabsName = ['Apps', 'Tricks', 'News', 'Games'];
				if ( index === (tabsName.length - 1) ) {
          				return	'<span class="' + className + '">'
          						+ tabsName[index] + '</span>'
          						+ '<div class="active-mark "></div>';
				}
				return '<span class="' + className + '">' + tabsName[index] + '</span>';
        		}
		});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.2/css/swiper.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.2/js/swiper.min.js