partner / client carousel

index.html

<section class="client">
	<div class="container">
		<div class="row">

			<div class="section-title">
				<h2> Nos références clients : </h2>
			</div>

			<div class="carousel-client">
				<div class="slide"><img src="https://www.grandvincent-marion.fr/_codepen/slider-logo1.png"></div>
				<div class="slide"><img src="https://www.grandvincent-marion.fr/_codepen/slider-logo2.png"></div>
				<div class="slide"><img src="https://www.grandvincent-marion.fr/_codepen/slider-logo3.png"></div>
				<div class="slide"><img src="https://www.grandvincent-marion.fr/_codepen/slider-logo1.png"></div>
				<div class="slide"><img src="https://www.grandvincent-marion.fr/_codepen/slider-logo2.png"></div>
				<div class="slide"><img src="https://www.grandvincent-marion.fr/_codepen/slider-logo3.png"></div>
			</div>
		</div>
	</div>
</section>

partner-client-carousel.markdown

partner / client carousel

partner / client carousel

A Pen by Grandvincent Marion on CodePen.

License.

script.js

	/**********************/
	/*	Client carousel   */
	/**********************/
	$('.carousel-client').bxSlider({
		auto: true,
	    slideWidth: 234,
	    minSlides: 2,
	    maxSlides: 5,
	    controls: false
	});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>

style.css

body {
  background-color:#eee;
}
.section-title h2 {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    padding-bottom: 6px;
    color: #000;
    letter-spacing: 0.3px;
    padding: 0;
}
.section-title::after {
    content: "";
    height: 3px;
    background: #fbb900;
    width: 80px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}
/****************/
/*	 BX-SLIDER 	*/
/****************/
section.client {
	padding:4em 0em;
	background-color: #eee;

}
section.client .section-title {
	margin-bottom: 6em;
}
.bx-controls {
	position: relative;
}
.bx-wrapper .bx-pager {
    text-align: center;
    padding-top: 30px;
}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    background: #666;
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />