Responsive ticker-style display drop-in using BX-Slider (http://bxslider.com/).
<section class="logos-bar"> | |
<div class="width-container"> | |
<ul class="logos"> | |
<li> | |
<div><a href="javascript:void(0)"><img src="path/to/logo.png" alt="thumbnail logo" /></div></a> | |
</li> | |
<li> | |
<div><a href="javascript:void(0)"><img src="path/to/logo.png" alt="thumbnail logo" /></div></a> | |
</li> | |
<li> | |
<div><a href="javascript:void(0)"><img src="path/to/logo.png" alt="thumbnail logo" /></div></a> | |
</li> | |
<li> | |
<div><a href="javascript:void(0)"><img src="path/to/logo.png" alt="thumbnail logo" /></div></a> | |
</li> | |
<li> | |
<div><a href="javascript:void(0)"><img src="path/to/logo.png" alt="thumbnail logo" /></div></a> | |
</li> | |
</ul><!--/.logos--> | |
</div><!--/.width-container--> | |
</section><!--/.logos-bar--> |
$('.logos').bxSlider({ | |
minSlides: 2, | |
maxSlides: 5, | |
slideWidth: 189, | |
slideMargin: 10, | |
moveSlides: 3, | |
auto: false, | |
controls: false, | |
pager: false | |
}); |
.logos-bar { | |
padding: 1em 0px 2em; | |
.logos { | |
position: relative; | |
margin: 0; | |
padding: 0px; | |
list-style: none; | |
li { | |
margin: 0; | |
padding: 0px; | |
list-style: none; | |
display: table; | |
table-layout: fixed; | |
width: 150px; | |
div { | |
display: table-cell; | |
vertical-align: middle; | |
height: 125px; // set to height of the tallest logo | |
width: 100%; | |
text-align: center; | |
} | |
img { | |
max-width: 100%; // turn this down just a bit to increase spacing | |
width: auto; | |
height: auto; | |
display: inline-block; | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment