Main Content
Slider Styles
Standard Wireframing Elements
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
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
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
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
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
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
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
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
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
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;
}
CSS Mobile
Javascript