Simple Unslider Responsive Client Slider

index.html

<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>

script.js

$(function() {
    $('.banner').unslider({
      //  Enable keyboard arrows
      keys: true,               
			// Enable dot nav
      dots: true,
      delay: 7000
    });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>

simple-unslider-responsive-client-slider.markdown

Simple Unslider Responsive Client Slider

I wanted to minimize code, so chose unslider (http://unslider.com/) 3kb jquery slider. I also wanted to create a simple responsive way to serve the slider with colored logos on hover.
This is a pen for http://www.ms3-inc.com/

A Pen by jim on CodePen.

License.

style.css

.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;
		}
	}