LP6 Style Guide: Carousel

Basic Minimal

Basic Campus Slider

• 
  Florida
• 
  Illinois
• 
  Kansas
• 
  Minnesota
• 
  North Dakota
• 
  Wisconsin

General Guidance

TBD

Slick

Slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping, and more.

• Fully responsive. Scales with its container.
• Separate settings per breakpoint.
• Uses CSS3 when available. Fully functional when not.
• Swipe enabled. Or disabled, if you prefer.
• Desktop mouse dragging.
• Infinite looping.
• Fully accessible with arrow key navigation.
• Autoplay, dots, arrows, callbacks, etc.

JS Snippet

					
	<script type="text/javascript" src="/common/js/slick.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.slider-basic').slick({
				slidesToShow: 1,
				arrows: true,
				dots: true,
				fade: true,
				slide: 'li',
			});
			$('.slider-minimal').slick({
				slidesToShow: 4,
				slidesToScroll: 1,
				infinite: false,
				arrows: false,
				dots: true,
				pauseOnFocus: true,
				responsive: [
			    {
			      breakpoint: 1000,
			      settings: {
			        slidesToShow: 3,
			        slidesToScroll: 1,
			        dots: true
			      }
			    },
			    {
			      breakpoint: 800,
			      settings: {
			        slidesToShow: 2,
			        slidesToScroll: 1,
			        dots: true
			      }
			    },
					{
						breakpoint: 600,
						settings: {
							slidesToShow: 1,
							slidesToScroll: 1,
			        dots: true
						},
					}
				]
			});
		});

	</script>
					
				

TBD