Skip to content
An infinite carousel is a great to showcase recent projects, high profile clients, and other items your website visitors should see.
Branch: master
Clone or download
smmadara Initial commit
The initial commit of source code.
Latest commit 41d9b62 Jul 22, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images Initial commit Jul 22, 2016
README.md
carousel.css Initial commit Jul 22, 2016
carousel.html Initial commit Jul 22, 2016
slick.js Initial commit Jul 22, 2016
slick.min.js

README.md

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>
You can’t perform that action at this time.