CarouselsPRO

A slideshow component for cycling through elements, like a carousel. Powered by Slick

Optional plugin

As this plugin is a non-Bootstrap JavaScript plugin, it should be considered as an optional extension and be removed when not in use, in order to improve page load times. Instructions on how to deal with plugins can be found here.

A carousel is built using three wrapping elements. The outermost wrapper, .carousel, is used to apply customizations. The second wrapper is used to identify the carousel by means of an id or class, through which you can initialize the carousel using JavaScript. Inside this wrapper is a list of .content-wrappers, each containing the content you wish to display. The example below shows a default carousel displaying images, with no customizations.


<div class="row">
	<div class="col-md-8 mx-auto">
		<div class="carousel">
			<div id="carousel-1">
				<div class="content-wrapper">
					<img class="img-responsive" src="/solid/img/demo-landscape.jpg">
				</div>
				<div class="content-wrapper">
					<img class="img-responsive" src="/solid/img/demo-landscape.jpg">
				</div>
				<div class="content-wrapper">
					<img class="img-responsive" src="/solid/img/demo-landscape.jpg">
				</div>
				<div class="content-wrapper">
					<img class="img-responsive" src="/solid/img/demo-landscape.jpg">
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(document).ready(function(){
		$('#carousel-1').slick({
			infinite: true,
			dots: true,
			prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left"></i></button>',
			nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right"></i></button>',
			slidesToShow: 1
		});	
	});
</script>

Before initialization using the slick() function, only the first .content-wrapper is made visible to the user, so that an uninitialized carousel does not break your page.

Customizing carousels

Carousels can be customized by adding modifier classes to the .carousel element.

Gradient controls

Add .controls-gradient for full height, transparent gradient controls.


<div class="carousel controls-gradient">
	<div id="your-carousel">
		...
	</div>
</div>

Round controls

Add .controls-round for rounded control buttons


<div class="carousel controls-round">
	<div id="your-carousel">
		...
	</div>
</div>

Controls color

You can change the color of the control buttons using .controls-{color}, where color can be any color from the color pallette, such as primary, secondary, c3, info, etc. For outlined controls, use .controls-outline-{color}.


<div class="carousel controls-secondary">
	<div id="your-carousel">
		...
	</div>
</div>

Focused stage

Create a focused stage where the non-active carousel elements are out of focus, using .stage-focus and specific settings.


<div class="carousel stage-focus">
	<div id="your-carousel">
		...
	</div>
</div>

<script>
	$('#your-carousel').slick({
		infinite: true,
		dots: true,
		centerMode: true,
		centerPadding: '60px',
		prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left"></i></button>',
		nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right"></i></button>',
		slidesToShow: 3,
		slidesToScroll: 3
	});
</script>

Dark navigation dots

Use .dots-dark to darken the navigation dots.


<div class="carousel dots-dark">
	<div id="your-carousel">
		...
	</div>
</div>

JavaScript behavior

Initialize a carousel as follows: 


$('#your-carousel').slick({
	infinite: true,
	dots: true,
	prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left"></i></button>',
	nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right"></i></button>',
	slidesToShow: 1
});

You may tweak the settings as desired, but without the prevArrow and nextArrow as above, they will simply display text instead of an icon.

Options, methods & events

For the full list of options, methods and events related to this plugin, visit the Slick documentation.

Read more

Cards Code