slider-pro-js/src/add-ons/thumbnail-arrows/thumbnail-arrows.css

Modular JavaScript slider that is dependency-free, rich-featured, flexible and easy to use

.sp-thumbnail-arrows {
	position: absolute;
}

.sp-fade-thumbnail-arrows {
	opacity: 0;
	transition: opacity 0.5s;
}

.sp-thumbnails-container:hover .sp-fade-thumbnail-arrows {
	opacity: 1;
}

.sp-top-thumbnails .sp-thumbnail-arrows,
.sp-bottom-thumbnails .sp-thumbnail-arrows {
	width: 100%;
	top: 50%;
	left: 0;
	margin-top: -12px;
}

.sp-left-thumbnails .sp-thumbnail-arrows,
.sp-right-thumbnails .sp-thumbnail-arrows {
	height: 100%;
	top: 0;
	left: 50%;
	margin-left: -7px;
}

.sp-thumbnail-arrow {
	position: absolute;
	display: block;
	width: 15px;
	height: 25px;
	cursor: pointer;
}

.sp-left-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow,
.sp-right-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow {
	transform: rotate(90deg);
}

.sp-top-thumbnails .sp-previous-thumbnail-arrow,
.sp-bottom-thumbnails .sp-previous-thumbnail-arrow {
	left: 0;
}

.sp-top-thumbnails .sp-next-thumbnail-arrow,
.sp-bottom-thumbnails .sp-next-thumbnail-arrow {
	right: 0;
}

.sp-left-thumbnails .sp-previous-thumbnail-arrow,
.sp-right-thumbnails .sp-previous-thumbnail-arrow {
	top: 0;
}

.sp-left-thumbnails .sp-next-thumbnail-arrow,
.sp-right-thumbnails .sp-next-thumbnail-arrow {
	bottom: 0;
}

.sp-previous-thumbnail-arrow::before,
.sp-previous-thumbnail-arrow::after,
.sp-next-thumbnail-arrow::before,
.sp-next-thumbnail-arrow::after {
	content: "";
	position: absolute;
	width: 50%;
	height: 50%;
	background-color: #fff;
}

.sp-previous-thumbnail-arrow::before {
	left: 30%;
	top: 0;
	transform: skew(145deg, 0deg);
}

.sp-previous-thumbnail-arrow::after {
	left: 30%;
	top: 50%;
	transform: skew(-145deg, 0deg);
}

.sp-next-thumbnail-arrow::before {
	right: 30%;
	top: 0;
	transform: skew(35deg, 0deg);
}

.sp-next-thumbnail-arrow::after {
	right: 30%;
	top: 50%;
	transform: skew(-35deg, 0deg);
}