Our Partners

Logos Slider

Documentation

bxslider install files:

Styles
Scripts
Images (folder images should be in css folder)

PHP

<section class="logos">
	<div class="tc">
		<h2>Our Partners</h2>
	</div>
	<div class="logos_slider">
		<?php for ($i = 1; $i < 7; $i++ ):?>
			<a href="#" class="image">
				<img src="/img/logo_img_<?=$i;?>.png" alt="">
			</a>
		<?php endfor;?>
	</div>
</section>

CSS

.bx-wrapper{padding:0;margin:0;border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;background-color:transparent}
	
.logos .image{position:relative;height:11rem}
.logos .image img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;width:80%;height:80%;-o-object-fit:contain;object-fit:contain;font-family:"object-fit: contain;";}

@media only screen and (max-width:767px) {
	.logos .image {height: 8rem;}
}

SCSS

.bx-wrapper {
	padding: 0;
	margin: 0;
	border: none;
	box-shadow: none;
	background-color: transparent;
}

.logos {
	.image {
		position: relative;
		height: 11rem;
		
		img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 80%;
			height: 80%;
			object-fit: contain;
			font-family: "object-fit: contain;";
		}
	}
}

@media only screen and (max-width:767px) {
	.logos .image {height: 8rem;}
}

JavaScript

var wrapWidth = $('body').width(),
	countSlides;

if ($(window).width() < 768) {
	countSlides = 4;
} else if ($(window).width() < 450) {
	countSlides = 3;
} else {
	countSlides = 6;
}

var slideWidth = wrapWidth / countSlides;

$('.logos_slider').bxSlider({
	minSlides: 1,
	maxSlides: countSlides,
	slideWidth: slideWidth,
	slideMargin: 0,
	ticker: true,
	speed: 50000
});