Infinite Carousel

Showcasing recent projects or high profile clients is essential to attracting new customers. Solodev's infinite carousel cycles through dozens of items with contemporary styling and necessary responsiveness. Using Slick Slider by Ken Wheeler, this carousel can be adapted to fit your website needs and add a touch of agency inspired design.

Tutorial

For detailed instructions, view Solodev's Adding an Infinite Client Logo Carousel to your Website article.

Demo

Check out a working example on JSFiddle.

HTML

The form includes basic HTML markup:

<section class="customer-logos slider">
	<div class="slide"><img src="images/image1.png"></div>
	<div class="slide"><img src="images/image2.png"></div>
	<div class="slide"><img src="images/image3.png"></div>
	<div class="slide"><img src="images/image4.png"></div>
	<div class="slide"><img src="images/image5.png"></div>
	<div class="slide"><img src="images/image6.png"></div>
	<div class="slide"><img src="images/image7.png"></div>
	<div class="slide"><img src="images/image8.png"></div>
</section>

CSS

All CSS is included in carousel.css.

JavaScript

In addition to the slick.js resource, the infinite carousel itself needs to be initialized with the following script:

<script type="text/javascript">
	$(document).ready(function(){
		$('.customer-logos').slick({
			slidesToShow: 6,
			slidesToScroll: 1,
			autoplay: true,
			autoplaySpeed: 1000,
			arrows: false,
			dots: false,
				pauseOnHover: false,
				responsive: [{
				breakpoint: 768,
				settings: {
					slidesToShow: 4
				}
			}, {
				breakpoint: 520,
				settings: {
					slidesToShow: 3
				}
			}]
		});
	});
</script>

For a full list attributes you can use to customize your carousel, visit Slick Slider by Ken Wheeler.

External Includes

The form includes the following third-party resources:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

alam5238 / infinite-carousel Goto Github PK