Slider Styles | Agent Image UIX

Main Content

Slider Style 1

Close

HTML

<section class="slide-style-1">
	<div class="container">
		<div class="sld-buttons">
			<span class="ai-font-arrow-b-p"></span>
			<span class="ai-font-arrow-b-n"></span>
			<span class="ai-font-arrow-b-n rota-up"></span>
			<span class="ai-font-arrow-b-p rota-down"></span>
		</div>
	</div>
</section>

CSS

.slide-style-1{
	margin: 20px 0;
}

	.slide-style-1 .sld-buttons{
		text-align: center;
	}
		.slide-style-1 .sld-buttons span{
			color: #0796b4;
			font-size: 44px;
			display: inline-block;
			vertical-align: middle;
			margin: 0 10px;
		}
			.slide-style-1 .sld-buttons span.rota-up{
			    transform: rotate(-90deg);
			}
			.slide-style-1 .sld-buttons span.rota-down{
	          transform: rotate(270deg);
			}

CSS Mobile

Javascript

Slider Style 2

Close

HTML

<section class="slide-style-2">
	<div class="container">
		<div class="sld-buttons">
			<span class="ai-font-arrow-b-p"></span>
			<span class="ai-font-arrow-b-n"></span>
			<span class="ai-font-arrow-b-n rota-up"></span>
			<span class="ai-font-arrow-b-p rota-down"></span>
		</div>
	</div>
</section>

CSS

.slide-style-2{
	margin: 20px 0;
}

	.slide-style-2 .sld-buttons{
		text-align: center;
	}
		.slide-style-2 .sld-buttons span{
			color: #fff;
			font-size: 17px;
			display: inline-block;
			vertical-align: middle;
			margin: 0 10px;
			width: 41px;
			height: 41px;
			background: #d3d3d3;
			border-radius: 50%;
			line-height: 41px;
		}
			.slide-style-2 .sld-buttons span.rota-up{
			    transform: rotate(-90deg);
			}
			.slide-style-2 .sld-buttons span.rota-down{
	          transform: rotate(270deg);
			}

CSS Mobile

Javascript

Slider Style 3

Close

HTML

<section class="slide-style-3">
	<div class="container">
		<div class="sld-buttons">
			<span class="ai-font-arrow-b-p"></span>
			<span class="ai-font-arrow-b-n"></span>
			<span class="ai-font-arrow-b-n rota-up"></span>
			<span class="ai-font-arrow-b-p rota-down"></span>
		</div>
	</div>
</section>

CSS

.slide-style-3{
	margin: 20px 0;
}

	.slide-style-3 .sld-buttons{
		text-align: center;
	}
		.slide-style-3 .sld-buttons span{
			color: #d3d3d3;
			font-size: 17px;
			display: inline-block;
			vertical-align: middle;
			margin: 0 10px;
			width: 41px;
			height: 41px;
			border: 1px solid #d3d3d3;
			border-radius: 50%;
			line-height: 41px;
		}
			.slide-style-3 .sld-buttons span.rota-up{
			    transform: rotate(-90deg);
			}
			.slide-style-3 .sld-buttons span.rota-down{
	          transform: rotate(270deg);
			}

CSS Mobile

Javascript

Slider Style 4

Close

HTML

<section class="slide-style-4">
	<div class="container">
		<div class="sld-buttons">
			<a href="#"></a>
			<a href="#"></a>
			<a href="#" class="active"></a>
			<a href="#" class="next-active"></a>
			<a href="#"></a>
		</div>
	</div>
</section>

CSS

.slide-style-4{
	margin: 20px 0;
}

	.slide-style-4 .sld-buttons{
		text-align: center;
	}
		.slide-style-4 .sld-buttons a{
			color: #d3d3d3;
			font-size: 17px;
			display: inline-block;
			vertical-align: middle;
			margin: 0 3px;
			width: 12px;
			height: 12px;
			border: 2px solid #acacac;
			border-radius: 50%;
			line-height: 41px;
			position: relative;
		}
			.slide-style-4 .sld-buttons a:after{
				display: block;
				position: absolute;
				left: 1px;
				top: 1px;
				opacity: 0;
				background: #009bbb;
				content: "";
				width: 6px;
				height: 6px;
				border-radius: 50%;
			}
			.slide-style-4 .sld-buttons a.active:after{
				opacity: 1;
			}

CSS Mobile

Javascript

Slider Style 5

Close

HTML

<section class="slide-style-5">
	<div class="container">
		<div class="sld-buttons">
			<a href="#"></a>
			<a href="#"></a>
			<a href="#" class="active"></a>
			<a href="#" class="next-active"></a>
			<a href="#"></a>
		</div>
	</div>
</section>

CSS

.slide-style-5{
	margin: 20px 0;
}

	.slide-style-5 .sld-buttons{
		text-align: center;
	}
		.slide-style-5 .sld-buttons a{
			color: #d3d3d3;
			font-size: 17px;
			display: inline-block;
			vertical-align: middle;
			margin: 0 3px;
			width: 18px;
			height: 18px;
			border: 1px solid transparent;
			border-radius: 50%;
			line-height: 41px;
			position: relative;
		}
			.slide-style-5 .sld-buttons a:after{
				display: block;
				position: absolute;
				left: 3px;
				top: 3px;
				background: #c0c0c0;
				content: "";
				width: 10px;
				height: 10px;
				border-radius: 50%;
			}
			.slide-style-5 .sld-buttons a.active{
				border-color: #acacac;
			}

CSS Mobile

Javascript

Slider Style 6

Close

HTML

<section class="slide-style-6">
	<div class="container">
		<div class="sld-buttons">
			<span class="ai-font-arrow-a-n"></span>
			<span class="ai-font-arrow-a-p"></span>
		</div>
	</div>
</section>

CSS

.slide-style-6{
	margin: 20px 0;
}

	.slide-style-6 .sld-buttons{
		text-align: center;
	}
		.slide-style-6 .sld-buttons span{
			color: #172b37;
			font-size: 66px;
			display: inline-block;
			vertical-align: middle;
			margin: 0 39px;
		}

CSS Mobile

Javascript

Slider Style 7

Close

HTML

<section class="slide-style-7">
	<div class="container">
		<div class="sld-buttons">
			<span class="ai-arrow-b-n"></span>
			<span class="ai-arrow-b-p"></span>
		</div>
	</div>
</section>

CSS

.slide-style-7{
	margin: 20px 0;
}

	.slide-style-7 .sld-buttons{
		text-align: center;
	}
		.slide-style-7 .sld-buttons span{
			color: #172b37;
			font-size: 66px;
			display: inline-block;
			vertical-align: middle;
			margin: 0 39px;
		}

CSS Mobile

Javascript

Slider Style 8

Close

HTML

<section class="slide-style-8">
	<div class="container">
		<div class="sld-buttons">
			<span class="ai-arrow-e-n"></span>
			<span class="ai-arrow-e-p"></span>
		</div>
	</div>
</section>

CSS

.slide-style-8{
	margin: 20px 0;
}

	.slide-style-8 .sld-buttons{
		text-align: center;
	}
		.slide-style-8 .sld-buttons span{
			color: #172b37;
			font-size: 66px;
			display: inline-block;
			vertical-align: middle;
			margin: 0 39px;
		}

CSS Mobile

Javascript

Slider Style 9

Close

HTML

<section class="slide-style-9">
	<div class="container">
		<div class="sld-buttons">
			<span class="ai-arrow-d-n"></span>
			<span class="ai-arrow-d-p"></span>
		</div>
	</div>
</section>

CSS

.slide-style-9{
	margin: 20px 0;
}

	.slide-style-9 .sld-buttons{
		text-align: center;
	}
		.slide-style-9 .sld-buttons span{
			color: #172b37;
			font-size: 66px;
			display: inline-block;
			vertical-align: middle;
			margin: 0 39px;
		}

CSS Mobile

Javascript

Slider Style 10

Close

HTML

<section class="slide-style-10">
	<div class="container">
		<div class="sld-buttons">
			<span class="ai-arrow-e-n"></span>
			<span class="ai-arrow-e-p"></span>
		</div>
	</div>
</section>

CSS

.slide-style-10{
	margin: 20px 0;
}

	.slide-style-10 .sld-buttons{
		text-align: center;
	}
		.slide-style-10 .sld-buttons span{
			color: #172b37;
			font-size: 66px;
			display: inline-block;
			vertical-align: middle;
			margin: 0 39px;
		}