Skip to content
master
Switch branches/tags
Code

Latest commit

The initial commit of source code.
41d9b62

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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>

About

An infinite carousel is a great to showcase recent projects, high profile clients, and other items your website visitors should see.

Resources

Releases

No releases published

Packages

No packages published