Skip to content

Instantly share code, notes, and snippets.

@mike-zarandona
Created October 16, 2014 15:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mike-zarandona/1ac1ef5c47d6a1d058a7 to your computer and use it in GitHub Desktop.
Save mike-zarandona/1ac1ef5c47d6a1d058a7 to your computer and use it in GitHub Desktop.
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