JSFiddle - React, Tailwind, and code Playground
HTML
<div class="ps-wrap"><div class="partners-slider">
<div class="pslide"><img src="http://server-pps.com/img/gwiazda_sponsor.png" /></div>
<div class="pslide"><img src="http://www.sundance.org/images/support-us/HPActivitiesLogo50x50.png" /></div>
<div class="pslide"><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQvsT_kxUqdhOoo7zSTkbQ76PLgx4ZRucUZcbf2KsrY0bFbu30agw" /></div>
<div class="pslide"><img src="http://i.cdn.turner.com/dr/nba/teamsites-nbateams/release/nets/sites/nets/files/content/images-gallery/2013/07/twitterimage-updated.jpg?1374006700" /></div>
</div></div>
CSS
img.tab-ico {
position: absolute;
left: 6px;
top: 50%;
margin-top: -12px;
}
.partners-slider {
height: 100%;
}
div.pslide {
text-align: center;
height: 100%;
}
div.pslide img {
vertical-align: middle;
}
.ps-wrap .bx-wrapper {
position: relative;
margin: auto 0;
padding: 0;
*zoom: 1;
}
.ps-wrap .bx-wrapper img {
max-width: 100%;
}
/** THEME
===================================*/
.ps-wrap .bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
}
.ps-wrap {
position: relative;
margin-top: 18px;
background: #d6d4c8;
padding: 6px 0 6px;
}
.ps-wrap:before{
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 100%;
content: '';
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAYAAACEhIafAAAAJElEQVQImQEZAOb/AOXj1/8A5ePX/wDx7+L/ALy6sf8Az87C/97LEYJAFgv5AAAAAElFTkSuQmCC) repeat-x;
z-index: 1;
}
.ps-wrap:after{
position: absolute;
bottom: 0;
left: 0;
height: 5px;
width: 100%;
content: '';
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAYAAACEhIafAAAAHklEQVQImWM4f+7Qf4Y9uzb+Z/j4/tF/hqePr0MIANUbEYIYiHfUAAAAAElFTkSuQmCC) repeat-x;
z-index: 1;
}
.bx-controls-direction {
position: absolute;
top: 80px;
}
JavaScript
$(document).ready(function() {
$('.partners-slider').bxSlider({
slideWidth: 924,
auto: 0,
autoStart: 0,
moveSlides: 1,
minSlides: 3,
maxSlides: 8,
pager: false,
slideMargin: 5
});
});
(function(e){var t={},n={mode:"horizontal",slideSelector:"",infiniteLoop:!0,hideControlOnEnd:!1,speed:500,easing:null,slideMargin:0,startSlide:0,randomStart:!1,captions:!1,ticker:!1,tickerHover:!1,adaptiveHeight:!1,adaptiveHeightSpeed:500,video:!1,useCSS:!0,preloadImages:"visible",touchEnabled:!0,swipeThreshold:50,oneToOneTouch:!0,preventDefaultSwipeX:!0,preventDefaultSwipeY:!1,pager:!0,pagerType:"full",pagerShortSeparator:" / ",pagerSelector:null,buildPager:null,pagerCustom:null,controls:!0,nextText:"Next",prevText:"Prev",nextSelector:null,prevSelector:null,autoControls:!1,startText:"Start",stopText:"Stop",autoControlsCombine:!1,autoControlsSelector:null,auto:!1,pause:4e3,autoStart:!1,autoDirection:"prev",autoHover:!1,autoDelay:0,minSlides:1,maxSlides:1,moveSlides:0,slideWidth:0,onSliderLoad:function(){},onSlideBefore:function(){},onSlideAfter:function(){},onSlideNext:function(){},onSlidePrev:function(){}};e.fn.bxSlider=function(s){if(0!=this.length){if(this.length>1)return this.each(function(){e(this).bxSlider(s)}),this;var o={},r=this;t.el=this;var...