Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Oct 1, 2018

Embed
What would you like to do?
Simple Unslider Responsive Client Slider
<div class="banner">
<ul>
<li>
<div class="client-group govt">
<h3>Our Clients Are Government Agencies</h3>
<div class="one-fourth first">
<div class="client va-logo"></div>
<h4><span>US VA</span><br>Veteran Affairs Hospital</h4>
</div>
<div class="one-fourth">
<div class="client disa-logo"></div>
<h4><span>US DISA</span><br>Defense Information Systems Agency<h4>
</div>
<div class="one-fourth">
<div class="client centcom-logo"></div>
<h4><span>US CENTCOM</span><br>United States Central Command</h4>
</div>
<div class="one-fourth">
<div class="client dos-logo"></div>
<h4><span>US DOS</span><br>US Department of State</h4>
</div>
</div>
</li>
<li>
<div class="client-group commercial">
<h3>Our Clients Are Recognized Brands</h3>
<div class="one-fourth first">
<div class="client graham-holdings-logo"></div>
<h4>Graham Holdings</h4>
</div>
<div class="one-fourth">
<div class="client k12-logo"></div>
<h4>K12 Inc<h4>
</div>
<div class="one-fourth">
<div class="client blackboard-logo"></div>
<h4>Blackboard Inc</h4>
</div>
<div class="one-fourth">
<div class="client kaplan-university-logo"></div>
<h4>Kaplan University</h4>
</div>
</div>
</li>
</ul>
</div>
$(function() {
$('.banner').unslider({
// Enable keyboard arrows
keys: true,
// Enable dot nav
dots: true,
delay: 7000
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
.banner { overflow: auto; position:relative }
.banner ul {padding-left: 0;}
.banner li { list-style: none; }
.banner ul li { float: left; }
.banner .dots {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right:auto;
display:block;
text-align:center;
}
.banner .dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #555;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
background: #aaa;
opacity: 1;
}
.banner .client {
background-size: 200px 200px !important;
height: 200px;
float: none;
position: relative;
margin: 0 auto;
transition: background 0.5s ease;
overflow:visible;
}
.banner h3, .banner h4 {
text-align: center;
font-family: 'montserrat', sans-serif;
text-transform: uppercase;
color: #555;
}
.banner h3 {
font-size: 42px;
font-weight: 400;
letter-spacing: 5px;
}
.banner h4 span {
text-transform:uppercase;
letter-spacing: 3px;
font-size: 22px;
}
.banner .client.va-logo { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/VA-GREY-lt.png") no-repeat center center; }
.banner .client.disa-logo { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/DISA-GREY-lt.png") no-repeat center center; }
.banner .client.centcom-logo { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/USCENTCOM-GREY-lt.png") no-repeat center center; }
.banner .client.dos-logo { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/DOS-GREY-lt.png") no-repeat center center; }
.banner .client.va-logo:hover { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/VA-COLOR.png") no-repeat center center; }
.banner .client.disa-logo:hover { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/DISA-COLOR.png") no-repeat center center; }
.banner .client.centcom-logo:hover { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/USCENTCOM-COLOR.png") no-repeat center center; }
.banner .client.dos-logo:hover { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/DOS-COLOR.png") no-repeat center center; }
.banner .client.graham-holdings-logo { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/GRAHAM-HOLDINGS-GREY.png") no-repeat center center; }
.banner .client.blackboard-logo { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/BLACKBOARD-GREY.png") no-repeat center center; }
.banner .client.k12-logo { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/K12-GREY.png") no-repeat center center; }
.banner .client.kaplan-university-logo { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/KAPLAN-GREY.png") no-repeat center center; }
.banner .client.graham-holdings-logo:hover { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/GRAHAM-HOLDINGS-COLOR.png") no-repeat center center; }
.banner .client.blackboard-logo:hover { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/BLACKBOARD-COLOR.png") no-repeat center center; }
.banner .client.k12-logo:hover { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/K12-COLOR.png") no-repeat center center; }
.banner .client.kaplan-university-logo:hover { background: url("http://ms3.bareseo.com/wp-content/uploads/2015/04/KAPLAN-COLOR.png") no-repeat center center; }
li:nth-child(1), li:nth-child(2) { width: 100%; }
.banner .client-group .one-fourth {
float: left;
margin-left: 2.564102564102564%;
width: 23.076923076923077%;
}
.banner .client-group .first {
clear: both;
margin-left: 0;
}
@media only screen and (max-width: 1200px) {
.banner .client {
background-size: 125px 125px !important;
height: 125px;
}
}
@media only screen and (max-width: 890px) {
.banner .client {
background-size: 200px 200px !important;
height: 200px;
}
.banner .client-group .one-fourth {
float: left;
margin-left: 2.564102564102564%;
width: 48.717948717948715%;
}
.banner .client-group .first, .banner .client-group .one-fourth:nth-child(4) {
clear: both;
margin-left: 0;
}
}
@media only screen and (max-width: 500px) {
.banner .client-group .one-fourth {
width: 100%;
clear: both;
margin: 20px 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.